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.
Related
I'm using Angular, Javascript and Typescript and Ionic.
I have a function createDropdown(inputField, arrayOfItems) which will attach a dropdown to the input field being passed populating the dropdown with the array provided.
This will work as a "autocomplete" dropdown, that's why I need a add an event listener "input" so it will look something like this:
createDropdown(inputField, arrayOfItems){
inputField.addEventListener("input",()=>{
//Logic to create dropdown
});
}
The problem is that, after adding the event listener to the input field, if the user spams a key "A" for instance from the keyboard, then this creates lag or delay and eventually the app crashes. Is there a way to prevent this from happening? I have tried "keyup", and it fixes it. However, with this, pressing any key from the keyboard will trigger the createDropdown function, for example: pressing "Control" or "Alt".
The end result should be, having the user typing in an input field, then the results that match should be displayed in the dropdown so the user can select from it. The more they type, the more accurate the results become.
You could use for example setTimeout() + implementation of a spinner.
Here an example for what I mean
https://stackblitz.com/edit/how-to-trigger-an-event-in-input-text-after-i-stop-typingwritin
What you're looking for is called "debouncing input". Take a look here: https://stackoverflow.com/a/36849347/4088472
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.
I have a select box which changes the form below via ajax. If someone changes the form, clicks the back button then clicks the forward button the form changes are reset but the select box still shows the same value.
How do I either do a hard page refresh or make the select box retain its default selected value?
You probably have an onchange event handler on your select element. Trigger that same event handler onload (or on document ready) of the document.
Reset the select box based on the value in the address bar.
Just reset the state of the check box every time the desired address is in the address bar.
After detecting a change in the browser's address, you can use some simple jQuery for example:
if (address === 'foobar.com/whatever') {
$('input[name=foo]').attr('checked', false);
}
The above code will simply uncheck the checkbox if it's checked. Do this check as soon as you detect that you are back at the address you are referring to.