How to notice tabbing into a text input field - javascript

I need to call a function whenever a user "selects" an input text field, meaning they can type in it. Currenty I am using a click as the trigger, but it occurred to me a user can also tab into the field. What is a more general trigger for a user selecting an input field.
E.g using vue.js
<input type='text' #click='certainFunction'>
// #click doesnt respond to tabbing into the input field.
// What should replace #click?

A more general trigger is when a user focuses on the input.
It is done by the focus event.
So something like
#focus='certainFunction'
It doesn't matter if he got there by clicking or tabbing, he is still focused on the input.

Related

HTML events changing input text, not incrementally

I have an input field with type="number". After this value is changed the page will perform validation and if failed it will show a bunch of information to the visitor.
So this validation should only be done when:
Pasting something into the box
Typing in the box and then pressing tab to select another input
Typing in the box and then clicking outside the box
Pressing enter (which performs a click on the submit button)
Clicking increment and decrement buttons
And not when:
Typing a single digit (as the input is not complete)
Are there HTML events available for this requirement?
I think what you might be looking for is the onblur or focusout event. It fires when the element will be out of focus. Basically, the opposite of onfocus.
<input type="text" name="fname" id="fname" onblur="myFunction()">
You may want to use it in combination with other events (onclick) which you require for the submit button.
let input = document.querySelector("input")
input.onchange = function () {
alert("changed")
}
<input type="number">
Did you actually try the event .onchange / addEventListener('change',{}) or in your case, since you are asking for an html-inline-solution: input onchange="yourFunc()"? It sounds like that's pretty much what you want.
(.onchange won't trigger as long as you are just typing).
Here's a very simple demo to stress the behaviour of .onchange:
as you will see, it fulfills most of your needs:
Typing in the box and then pressing tab to select another input
Typing in the box and then clicking outside the box
Pressing enter (which performs a click on the submit button)
Clicking increment and decrement buttons
The only thing missing is triggering the event upon pasting smth in it, but the user can just press enter, click elsewhere, tab etc. to fire your function.
function fire(){
console.log("changed");
}
<input type="number" onchange="fire()">
<button>a non-functional button to focus on</button>

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

Hidden focus on blur of an input element in dom

A little Explanation : I am using List view control of kendo UI(Telerik). I am triggering an update event of that control after editing the fields in list view. The list view control is having some text-boxes, a dropdown,checkbox and a submit button. When a user change something, ideally it should trigger update but its not doing update because control is not able to judge if there is a change in model.
It is only working if I input something in textbox and just click on outside of textbox i.e just do a onblur before hitting submit. I don't know why it is happening but what I need is to just trigger a focus event but in a hidden mode so that user is unaware of it but it just happens after a user input something in textbox so that the list view control works successfully.
I am trying to do it like below but it will get noticed to user. How can i trigger focus in hidden mode after a user just enter something in textbox before hitting a submit?
function BlurFunc() {
debugger;
$(this).closest('li').find('.inputField').focus();
}
Without your code it is not clear whether you are using MVVM data binding to your model, but this may help; from http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/value:
By default the value binding relies on the change DOM event, which is
raised after blurring the element whose value has changed. This means
that the value from the View-Model is updated when the element loses
focus. The data-value-update attribute can be used to specify a
different DOM event, such as keyup or keypress. The keydown event is
not supported, because the DOM element value is not yet updated when
that event triggers.
For example, try adding data-value-update="keyup" as an attribute to your text box input element:
<input data-value-update="keyup" data-bind="value: inputValue" />
This should then update the model value upon each key press and not wait until focus has been removed.

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

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

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

Categories