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!');
}
});
Related
I have a trouble with iOS HTML5 autocorrect. It's reproduced by JSBin http://jsbin.com/zusahev
// click - textarea loses focus - keyboard is closed
b1.addEventListener("click", function() {
t1.value = '';
});
// touchend with preventDefault to save textarea focus
// but iOS autocorrect doesn't update current word
// how to manually trigger autocorrect update?
b2.addEventListener("touchend", function(e) {
t2.value = '';
e.preventDefault();
});
Open example in any iOS device
Enter text in the first textarea, click Button 1. Textarea loses focus
Enter text in the second textarea, click Button 2. Textarea doesn't lose focus, but iOS autocorrect doesn't update own value.
I expect that after change value in textarea autocorrect suggest would be updated. How to manually trigger autocorrect update?
My solution is to allow textarea to lose its focus, and then focus on it again: http://output.jsbin.com/sihufuzigo
b2.addEventListener("click", function(e) {
t2.value = '';
t2.focus();
});
Note that iOS has limited the ability to focus() on fields programmatically: it could be done only from event handlers which are triggered by real user (real "click" event in this case) - see Mobile Safari: Javascript focus() method on inputfield only works with click? for more information
I'm developing a small library in which I have an input which when focussed, can't be blurred by clicking/tapping a specific div (by returning false on the mousedown event). Other elements are fine (normal behavior). Mentioned div contains in the actual implementation a few buttons which add text to the input field. The focus is not required for that to work, but I want keyboard input accepted there as well, so I want it to work the way I explained.
I noticed somewhat strange behavior on mobile though.
When longpressing (click and hold a few hundred ms) the unclickable div whilst focussed on the input, the mousedown event doesn't occur and the blur event magically triggers. I noticed that another event did not occur either, so it's not only the mousedown event.
Example:
<input id="input" type="text" />
<div id="disabledArea" class="flex-center">
Blur disabled when clicking here.
</div>
With the following JavaScript:
var input = document.getElementById('input');
var disabledArea = document.getElementById('disabledArea');
input.addEventListener('blur', () => {
console.log("blur");
});
disabledArea.addEventListener('mousedown', (e) => {
console.log("mousedown");
e.preventDefault();
return false;
});
https://jsfiddle.net/pgukmmjo/
Can anybody help me with this? It's kinda hard to explain, but very obvious once you understand the problem.
I recommend the example JSFiddle to be viewed in Chrome with DevTools open (CTRL + SHIFT + I) and device toolbar on (CTRL + SHIFT + M) which simulates mobile touch. Alternatively you can change the console logs with alerts and view it on mobile.
The keyboard appears whenever a text input is first responder.In my current application, the keyboard opens when I click on the input, but whenever i click on the "go" or "return" button, it disappears. I want the keyboard to be open by default all the time until / unless the user clicks on any back event.
inputchatvar.focus();
keypressed=false;
$('#inputchat').on('keydown', function(e){
if(e.which == 9) {
e.preventDefault();
e.stopPropagation();
keypressed=true;
onKeyPressed(e,$scope,inputchatvar,spn);
}
});
Is there a way to get focus on input whenever the input box is generated dynamically?
In my pop up dialog box I'm using jquery live() to change the value of the textarea when it loses the focus (blur event). When I close the dialog by clicking the cancel button it works fine in desktop browsers, but in my ipad devices, when i tired to close the dialog by clicking the cancel button the following behaviour occurs
1) on my first tap, the blur event is called and the textarea value changes (virtual keypad also hides).
2) on second tap, the pop up window closes.
Note : when I makes the value attribute of the textarea on blur event to null. it works fine in ipad devices.
I want the pop up to be closed on single tap itself.
Some suggestions.
Are you binding the "click" event ?
Try to change from live() to on(): https://api.jquery.com/on/
Try stopping propagation and default event:
$("some_element").on('click', function(ev) { ev.stopPropagation(); ev.preventDefault(); /* Your code here */ return false;});
Are you trying to create a placeholder text for the input ? If so you can use the "placeholder" attribute in HTML5 to implement this without any scripts.
I have to use a Virtual(on screen) keyboard on a asp:textbox which has a AjaxControlToolkit's
automcomplete attached to it, the virtual keyboard I use is the jQuery keypad plug in: http://keith-wood.name/keypadRef.html , but I have some problems with combining these two:
Typing in the virtual keyboard does not
trigger the Autocomplete list.
When the textbox has
autopostback=true if you click
anything on virtual keyboard the
textbox loses its focus and posts
the form.
Does anyone knows that on respond to what events the autocomplete list activates?
and also I need to know how to prevent textbox from losing its focus when a button on virtual keyboard is pressed?
1) JavaScript is setting the values and JavaScript does not trigger the autocomplete list from popping up. [and I doubt there is anyway to trigger it with JavaScript]
2) Clicking on the "keyboard" removes focus from the textbox and presto, the blur event fires and submits the form. [You would have to code your own autopostback=true]
Basic idea is to add a timeout that calls document.forms[0].submit() and if the focus is added back to the textbox before the timeout fires clearTimeout()
var textbox = document.getElementById("yourElementId");
textbox.blur = function(){ this.timer = window.setTimeout( function(){ document.forms[0].submit(); }, 100 ) };
textbox.focus = function(){ if(this.timer) window.clearTimeout( this.timer ); };