How to manually focus to next input field with jquery virtual keyboard? - javascript

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();
}

Related

Chrome extension: Watch for changes on an input box and trigger event based on whats inputted?

Problem - Watch for active input boxes in a page and trigger events if specific words are entered into the input box
Steps
Click 'reply or reply all'
Input box becomes active
Enter |intro
|intro text gets replaced with long form version. The |intro is like a snippet or short code
Heres what I'm thinking
Query all input boxes on a page
Check for input with focus
Add event listener on input to check for keyup events
Conditional statement to check if string contains specific snippet/short code
If condition is met then replace snippet with long form text
What do you think of my approach to this functonality

How to lock focus on a text input box so that it is always active?

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>

Enter on autocomplete item affects submit button

I am using the google.maps.places.Autocomplete api to find addresses using autocomplete functionality. When the user is selecting an item by the key and hitting the enter button the submit button is affected instead.
In principle the default button behavior is ok, but not while choosing an element in an autocomplete textbox.
Do I really need to catch the Enter event and check what element has the focus?
You will need to add a keydown event and handle things properly when key 13 (Enter) is pressed.

force the focus to leave a form field with jQuery in iOS when selecting non-input element

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
});

iPhone Trigger keyboard in input field (HTML / Javascript)

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.

Categories