We Keep Coding

Preventing keyboard dismissal on form submit on mobile view of web app

I am creating a PHP Javascript chat application. Whenever I click on send button it simply slides down / dismisses the keyboard. If I need to send a new message I again have to tap on the textarea field to make the keyboard slide up / appear for typing. This unwanted keyboard dismissal after every send is annoying. I haven't included any code here as this is not a coding bug that is occurring from my script. This seems to be the default behavior of the web apps that dismisses the keyboard when the form's submit button is clicked.
The gif below shows what is happening. How can I prevent this default behavior?
https://gifyu.com/image/ABYn

The problem here is every time you click on the send button, the textarea loses focus. Once the textarea loses focus, the on screen keyboard has no reason to be visible. You can solve this by adding a javascript code to your click event so that the on screen keyboard remains there every time after the submit button is clicked.
You can use something like:
const form = document.querySelector(".typing-area"),
inputField = form.querySelector(".input-field"),
sendBtn = form.querySelector("button");
// PREVENT FORM SUBMISSION BY PAGE REFRESH (THE DEFAULT BEHAVIOUR)
form.onsubmit = (e)=> {
e.preventDefault();
}
// ADD FOCUS TO INPUT FIELD BY DEFAULT (ON PAGE LOAD)
inputField.focus();
// PREVENT INPUT FIELD FROM LOOSING FOCUS AFTER SEND BUTTON IS CLICKED
sendBtn.onclick = ()=> {
inputField.focus();
}

javascript onblur in ie allowing other text to be clicked and then fires the event

I have a form in which i have used asp.net validators. Along with the by default behavior of Asp.net validators i need them to fire onblur and gain the focus back so that user should not escape from that box. I did the following method in javascript and called them.
The following is my js function
function callMyValidators(a,b) {
var validator = document.getElementById(a);
ValidatorValidate(validator);
if ((document.getElementById(a)).style.visibility == "visible")
document.getElementById(b).focus();
}
I call them in each textbox onblur by
onblur="callMyValidators('RangeValidator2','txtPOBOX')"
In google chrome its working fine. But in IE it allows other text boxes to be clicked and then only firing the onblur event of current textbox. Since the second text box is being clicked the onblur event of both the textboxes fire and they mutually fight each other to focus, leaving the page hanged up.
How can I solve it. Please help. Any help much appreciated.

PhoneGap: JavaScript Focus and Blur event in iOS / Android

I would like to detect the focus and blur event in HTML input text box in a PhoneGap mobile application.
For iOS, the behaviour is as expected - When the textbox is in focus (textbox is clicked), alert message Focus! is displayed. When the textbox loses focus (keyboard is closed / move on to next input box), alert message Blur! is shown.
However, for Android, when I click the textbox (the textbox is in focus), alert message Focus! and Blur! are displayed continuously which means that it is focus, blur, focus, blur, ...
How can this be avoided so that it can align with iOS?
In JavaScript:
var txtValue = document.getElementByID('txtValue');
txtValue.addEventListener('focus', function() {
alert('Focus!');
});
txtValue.addEventListener('blur', function() {
alert('Blur!');
});
In HTML:
<input type="text" id="txtValue" />

This is because when you show the alert, focus goes into that dialog, losing it from the input field and dispatching blur event. And when you close the dialog, focus goes back into input field, dispatching focus event.
I don't know the exact fix for this. Maybe using custom overlay dialog / lightbox instead of window.alert() could be one solution.
Other option could be comparing where the event is dispatched from, eg (not tested):
var txtValue = document.getElementById('txtValue');
txtValue.addEventListener('focus', function(evt) {
if (evt.nodeName && evt.nodeName.toLowerCase() === 'input') {
alert('focus!');
}
});

DOM problem with click initiating a focusout event on a different input

I have an <input type=text> with focusout event handler
I have a <button> with click event handler
Focusout checks whether format in input box is correct. It does so by testing input value against a regular expression. If it fails it displays a message (a div fades-in and -out after some time) and refocuses my input by calling
window.setTimout(function() { $(this).focus(); }, 10);
since I can't refocus in focusout event handler. focusout event can't be cancelled either. Just FYI.
Click collects data from input elements and sends it using Ajax.
The problem
When user TABs their way through the form everything is fine. When a certain input box failes formatting check it gets refocused immediately after user presses TAB.
But when user doesn't use TAB but instead clicks on each individual input field everything works fine until they click the button. focusout fires and sets time-out for refocusing. Since time-out is so short focusing happens afterwards and then click event fires and issues an Ajax request.
Question
I have implemented my formatting check as an independent jQuery plugin that I want to keep that way. It uses .live() to attach focusout on all input fields with a particular attribute where format regular expression is defined.
Data submission is also generic and I don't want to make it dependant on formatting plugin. They should both stay independent.
How can I prevent click event from executing without making these two plugins dependant?
Example code I'm fiddling with
After some searching I've seen that all major browser support document.activeElement but I can't make it work in Chrome. FF and IE both report this being the active element, but Chrome always says it's BODY that is active even though click fired on the button element.
Check this code http://jsfiddle.net/Anp4b/1/ and click on the button. Test with Chrome and some other browser and see the difference.

You could use a flag...
Live demo: http://jsfiddle.net/Anp4b/4/
So your question is:
How can I prevent click event from executing without making these two plugins dependent?
Well, you obviously cannot prevent the click event. If the user wants to click the button, he will, and the click event will trigger. There's nothing you can do about that.
So the answer to the above question is: You cannot.
Based on the current conditions, you have to - inside the click handler - retrieve the validation result, and based on that result, decide if form submission should or should not occur.
JS Code:
$("#Name").focusout(function(){
var that = this;
valid = this.value.length ? true : false;
!valid && window.setTimeout(function() {
$(that).focus();
}, 0);
});
$("#Confirm").click(function(e) {
if ( !valid ) { return false; }
e.preventDefault();
alert('AJAX-TIME :)');
});
HTML Code:
<input type="text" id="Name">
<button id="Confirm">OK</button>

Is there are reason you use .focusout instead of .blur?
Using a flag is a good idea, but I would rather use a class on the element. By using classes to determine the state you can also style it accordingly. Here's my example based on your fiddle.
Another solution that hopefully gives the result you are looking for.
1) Create a named click handler:
var clickHandler = function(e){ /** submit form or whatever you want to do**/ };
$("button").click(clickHandler);
2) Add the following to the focusout event when it's failing validation:
$("button").unbind("click", clickHandler).one("click", function(){ button.click(clickHandler); return false;});
You can find an example of this here.

onBlur event overriding jQuery UI events

I have a textbox that is wired up using jQuery UI 1.8.4 autocomplete. I have the select event wired up so when the user chooses an item from the list it calls another JavaScript function that issues an ajax request to save the data and update an XML document.
On the same textbox there is an onBlur event so that if the user manually types the data in and tabs off the textbox without choosing an autocomplete item it also performs the update.
When the user selects an item from the autocomplete list it causes onBlur to fire which overrides the select event, thus the only data that gets updated is whatever is in the textbox that the user typed, and since the select event doesn't fire the contents of the textbox don't get updated.
I've tried using the change event with the same results.
Is there a way to ensure the select event gets fired and also implement some functionality that will emulate an onBlur in the case where a user types the value in rather than selecting it?

The problem is when the user interacts with the autocomplete menu, the textbox loses focus and the blur event fires. There is no way to really detect if the user is in the autocomplete control unless the component tells you that.
If the autocomplete control you are using does not have methods to tell you when it is closed, than you are probably stuck with using a setTimeout to wait a bit before you fire your code.

I think The onselect is always fired
"BUT" its fired only after onblur event of the textbox.
And this happens only when you use the mouse to select the autocomplete item and not through selecting the item by keyboard.
You may undo the update made on onblur with the select event depending on wether mouse click or keyboard select is made.
select: function (event, ui) {
if (event.originalEvent.originalEvent.type == 'click') {
//undo the onblur event happened by an ajax call here
//$("#txtbox").val() will still be available to do an undo
}
//do the actual onselect function here
}