I had an issue with the select2 multi-select on mobiles. The keyboard kept appearing. The fix was to remove auto focus on the search input box to drop straight in to the picklist - see https://jsfiddle.net/yw61h28z/
Now the issue is, if I want to use the input as a search (click in input twice to gain focus) start typing I only manage to type one character before it loses focus due to the picklist opening. When the picklist opens the first fix is applied to lose focus. Not sure what I can do here - maybe add a delay when typeing. Or only apply this:
$("#dataCombo").on('select2:open', function (e, i) {
$(document.activeElement).blur()
});
on click and exclude from when a user types?
Related
I am using jquery virtual keyboard in my page. i have two input boxes. On my page load i manually focus the first input field. so that virtual keyboard enabled. on pressing VK Tab in focus to next input field. so far fine. But as per new requirement when the user enters 8 characters in the first input field then the focus should move to next input field. I tried adding the condition in the virtual keyboard button click event and set $('#nexIPField').focus() but not working as expected. How to achieve this?
What i am thinking is manually trigger the tab key event solve the problem. If it is right how to trigger the tab key event?
One way to do this would be to associate an onchange event on your textbox.
Call a function on change to check the number of characters which have been typed. Once it reaches 8, trigger a focus on your next sibling.
<input type='text' onchange='checkChars()'/>
Javascript:
function checkChars() {
//take length of that input field and check for 8
$(this).next().focus();
}
Using jQuery or something similar, is it possible to detect when a user has clicked away, effectively removed focus, from a form field in iOS? I have conventional form which has a first name, last name, address line 1, address line 2 etc.
On an iPad when you select a form field the only way to leave that form field is to select another field in the form by clicking it or by hitting the Previous or Next buttons in the keyboard pane.
As the keyboard pane is shown clicks to other non-input elements on the page are ignored, so focus remains on the form field.
Is there a way with jQuery/JavaScript (or anything else) to force the focus to leave the form field if I click away from it by clicking a non-input form element?
Here's an example of what I mean. In the screen below, when the focus is on the Line 1 element I can't move out of it by clicking a non-input element.
Try just doing a quick blur() on the form, that might work.
$('body').on('click', function () {
$('form').blur();
// And since you said selecting an anchor might help, potentially doing a:
$('a#whatever').blur(); // might do the trick too
});
I am trying to set a few input field connectd to each other.
in the 1st field you can enter 3 digit
in the 2nd field you can enter 3 digit
in the 3rd field you can enter 4 digits
When i the first field as 3 digits, i would like to have the focus move to the 2nd one and same for the moving to teh 3rd one.
Using not so smart javascript it ie working, however on iPhne there is an issue: whene the focus is moved to the 2nd field, althouth i manage to create and trigger different events on eh field, the on screen keyboard do not want to reappear.
I tried to use simple focus() method.
Then to create and dispatch focus event, click event touchstart event, touch end event but i di dnot manage to figure out how to make the browser show the keyboard.
Is there anyone out there with an idea how to do this?
HELP
Thx
Daniel
An element.focus() should show the keyboard. You must be doing something wrong. Additionally if all your input / text areas are in a form element it should auto advance to the next element. You can also use element.blur() to hide the keyboard.
Is it possible to control the display i.e.(show/hide) of keyboard in iPad Safari through code?
I have 2 form fields;
1. Text box (say Name)
2. Select list/Dropdown (Say State)
My question is when user moves focus from Name to State, the keyboard is still there..Why is it so and how can I hide the keyboard when focus moves to dropdown?
Thank you.
I just ran into a very similar problem, not sure if my solution will work for you.
In my case, I have a text input inside a form. On submit, I'm using e.preventDefault() to stop the page from navigating. I believe this was also having the effect of stopping the default action of hiding the keyboard.
To solve this, I added an explicit input.blur() when the form is submitted. This seemed to be enough for safari to remove the keyboard.
Hope this helps!
I had the same issue. I had a form were keyboard should be collapsed when type out of the field (not native behavior on ipad) and when focus select field. The only solution for me was creation of hidden input
<input type="hidden" id="blurInput" />
and javascript code handler for focus event:
$element = $(event.target);
if($element.is('select')) {
$('#blurInput').blur();
$element.focus();
}
In case you want just to blur input field another solution works perfect, but between input and select it fails
document.activeElement.blur();
$('input').blur();
I'm making an intranet application and experimenting with the Jeditable plugin for jQuery. The following function makes an element (in this case a td element) clickable, which then turns it editable (again in this case selectable, as it's a select box) and checks a key listener to see if tab or shift-tab has been pressed to activate the next or previous editable area.
$('.editBool').editable(function(value, settings){
// show and hide clickable links. shouldn't be important to problem,
// but i don't know at this point
$(this).parent().find('a.editbutton').hide();
$(this).parent().find('a.savebutton').show();
$(this).parent().addClass('notSaved');
// sets a warning if they leave the page without saving edited data
window.onbeforeunload = savePage;
// needed for editable to work (apparently).
return(value);
}, {
data : "{'Yes':'Yes','No':'No'}",
type : 'select',
onblur : 'submit',
callback : function(value, settings) {
// kp is the keypress, sp is a bool checking for the shift key
if (kp == 9){if (sp){$(this).prev().click();}else{$(this).next().click();}kp = null;}
}
});
If I tab through the Jeditable boxes with code like this, I have no problems, until I move the mouse in Internet Explorer (7 and 8). If the currently selected element is a select box (using the code above), when the mouse moves, the select box loses focus and triggers the onblur event. If the mouse doesn't move, focus stays with the select box.
If I use the cursors to try to select another value, focus is lost as well, and again the onblur event is triggered.
This does not happen with any other kind of element I've set as Jeditable (textarea, autogrow textarea, masked text), just on selects, and only in IE 7-8 (maybe 6 as well, but I don't care about 6 anymore). It works as I expect it to work in FF3, Chrome 4+, Opera 10 (focus stays on select box when mouse moves and options can be selected by keyboard arrow commands).
Does anyone have any ideas about why this might be happening?
Thanks.
Clarification time: This bug only happens when using a next() function to go from a jeditable enabled td set to change to text, textedit or autogrow on click, to a jeditable enabled td set to a select box. It doesn't happen when going from text to text, or select to text.
More detail time: The bug is happening when the focus() is called in the jeditable jQuery plugin, line 253:
$(':input:visible:enabled:first', form).focus();
It seems if the mouse is moved after this line, it causes the select box to lose focus. This is driving me nuts, and as I want to solve this one, I've been attacking it every which way I can. I came across a curious oddity by swapping the previous line for this one:
setTimeout(function() { $(':input:visible:enabled:first', form).focus();}, 1000);
During the second between the select box being created and the focus set, if the mouse moves, focus is not lost once set. If the mouse does not move before focus is set, when it does move, focus is lost. This appears to be total fruit and nuttiness. I've been googleing the hell out of this issue, and can't find a solution. Any help would be very much appreciated.
Thanks,