I have two text fields (input type="text") say #tb1,#tb2
Now the second textbox appears only if I enter a particular string in the first text box (some serial number)
Now I'm accessing the web application with an iPad so when I tap on the first text field the native iOS keyboard pops out. With "prev" (active) & "next" (inactive) on top of the keyboard.
Now when I enter the correct serial number in the first text field, the second text field appears. But the "next" button in the iPad keyboard is not in an active state. I need this because after the user has entered the correct string in the first text field he will tap on the "next" button which will bring the focus on the second text field for the user to enter data.
Is there any way in Javascript to tell the native iOS keyboard that the 2nd text field is now visible & enable the "next" button. In other words can i refresh the native iOS keyboard "view" when the 2nd text field is visible.
I did some Googling and found that to call/dismiss the iOS keyboard in objective-C can be done by:
becomeFirstResponder [myTextField resignFirstResponder];
Not sure how this thing works in objective C.
I'm looking for a javascript solution to refresh the iOS keyboard so that when the 2nd textfield is visible the "next" button is active and vice-versa.
Any other JS/iOS solution is also welcome.
You can simply focus on the second field after it has become visible and the first one was filled. That's no brainer with JQuery, and the iOS browser will happily enable the "back" button on the keyboard when you auto-focus on the next field:
window.onload = function () {
$('#tb1').keyup(function(evt){
if(evt.target.value == 'CORRECT_SERIAL_NUMBER') {
$('#tb2').show();
$('#tb2').focus();
}
});
};
Related
I am making a checkout screen that will go on a touchscreen that is attached to a barcode scanner, no other mouse or keyboard will be accessible from the user side. The scanner will scan into a text input box that I need to always be highlighted and active, even if someone accidentally clicks outside it, without them having to click inside the text input again to refocus it.
I have the input text box that the barcode will scan into focused and active upon load with the jquery below, but is there a solution to make that always focused, even when you click or touch outside of the input field? This is all I have so far to make it focus on load:
$('input[name="patronid"]').focus();
So even though the page has other elements like a footer and scrolling ad space, the only element I want to ever focus on is the input field with the text box and button to submit the barcode when they scan. Hope someone can help!
There's a blur event whenever a component loses focus. Just grab focus again whenever you get a blur event for this input.
$('input[name="patronid"]').focus();
$('input[name="patronid"]').blur(function(){
$('input[name="patronid"]').focus();
});
$('button').click(function(){
console.log('click detected - returning now to input field');
console.log('More can be done in here, if required');
//Turn off the .blur if needed
$('input[name="patronid"]').off('blur');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input name="patronid" />
<button>Ok 2 Click</button>
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?
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.