I want to do input validation with jQuery. Every time the user blurs an input, it should get validated. The validation is not the problem, it's the focus part.
Some inputs are embedded in a bigger parent element. The parent element should be the indicator for focusin and focusout events. In other words: If the user clicks on the parent element of the input, it should focus the input.
Here is a demonstration:
DEMO on jsFiddle
In the demo, the first input is surrounded by a ul which is clickable and causes the underlying input to focus. The second input is surrounded by a div which does nothing. Watch the console for the output.
Here is the markup taken from the demo. HTML:
<ul>
<li>
<input type="text" class="embed" />
</li>
</ul>
<div>
<input type="text" class="normal" />
</div>
JavaScript:
$('input').focusin(function(event) {
console.log('input.' + $(this).attr('class') + ' focusin');
});
$('input').focusout(function(event) {
console.log('input.' + $(this).attr('class') + ' focusout');
// either here or in blur:
// now i want to do some validation and display errors if there are any
});
$('input').blur(function(event) {
console.log('input.' + $(this).attr('class') + ' blur');
// either here or in focusout:
// now i want to do some validation and display errors if there are any
});
$('ul').click(function(event){
console.log('ul click');
$('input.embed').focus();
});
Currently these are my questions and problems:
When clicking on the embedded input, it also fires the ul click event, which i do not want. How can i detect in that event if the input was clicked directly?
If the embedded input is already focused, and i click on the parent ul, it fires the focusout event of the input (which would trigger the validation) and immediately focuses it again because of the ul click handler. How can detect this and simply do nothing? Because in fact, from the point of view of the user, the focus didn't change.
What's the difference between blur and focusout?
For your first question:
$('ul input.embed').click(function(event){
event.stopPropagation();
});
For your third question, from jQuery api documentation:
The focusout event is sent to an element when it, or any element
inside of it, loses focus. This is distinct from the blur event in
that it supports detecting the loss of focus from parent elements (in
other words, it supports event bubbling).
Related
I have a view with a form. The form has many inputs, and I would need detect when the user moves between them (clicking or pressing 'tab').
For now I have this:
$('input').on('click',function(){
// Do something
});
But I would need detect if the user focus on these input even if he doesn't use the mouse.
Thank you
How about focus?
$('input').on('focus',function(){
// Do something
});
The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>).
https://api.jquery.com/focus/
For all text inputs inside the form
$(document).ready(function () {
$('form').on('focus blur', 'input', function () {
// Handle event
});
});
You need to use focus event instead of click:
$('input').on('focus',function(){
// Do something
});
I have added change event on the input field so that whenever user enters the text into it, so other task should happen, it works but when i click outside the input field.I don't know whether it is default behavior or i am doing some thing wrong. I tried using keyup and keydown events and it works as expect.
Please suggest.
Here is my code:
$("#mobile-number").on('change',function(){
// some other code
});
The change event fires when an elements value changes.
For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
In other words, on an input, the change event fires when the element loses focus, not when you type, and that is the default behaviour.
That's why there are key events as well, and on modern browsers you can catch most changes to an input with the input event
$("#mobile-number").on('input',function(){ ...
Yes, it is the desired behavior.
Change Event
The change event is fired for , , and
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
Depending on the kind of form element being changed and the way the
user interacts with the element, the change event fires at a different
moment:
When the element is activated (by clicking or using the keyboard) for and ;
When the user commits the change explicitly (e.g. by selecting a value from a 's dropdown with a mouse click, by selecting a
date from a date picker for , by selecting a file
in the file picker for , etc.);
When the element loses focus after its value was changed, but not commited (e.g. after editing the value of or ).
Try using input event:
$(function() {
$("#mobile-number").on('input', function() {
$("#copy").val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type='text' id='mobile-number' />
<input type='text' id='copy' readonly/>
Try this:( If i really understand your problem )
jQuery(document).on('change', '#mobile-number', function() {
// some other code
});
for type event:
jQuery(document).on('keyup', '#mobile-number', function() {
// some other code
});
You should provide your selector to the .on function:
$(document).on('change', '#mobile-number', function() {
// some other code
});
My code:
<input class="quantity" type="text" value="33000">
<script>
$(document).ready(
$('.quantity').keyup(function (event) {
alert('up');
MyVeryImportantValidate($(this), event.key)
});
..
</script>
My problem, if introduced into the Input still holding the keys and mouse make click on any other element in page... event keyup does not work.
I think the documentation in jquery states it clearly, it is going to the item that has focus.
http://api.jquery.com/keyup/
The keyup event is sent to an element when the user releases a key on
the keyboard. It can be attached to any element, but the event is only
sent to the element that has the focus. Focusable elements can vary
between browsers, but form elements can always get focus so are
reasonable candidates for this event type.
In fact the focus is lost even on holding a key down in this input text area. If I hold down the a letter key it repeats until I click outside it changing the focus.
I need to create a part of a form where if you click on a select, a checkbox field should popup and if you click anywhere else again, this field should disappear. I would like to do this with focusing the field after clicking on the select, but for some reason, my checkbox field loses its focus not only when you click anywhere else out of it, but even when you click on a label of a checkbox INSIDE of it. So the problem is that I am focusing an element in which I click on a label and the focused parent element loses its focus for some reason I can not figure out.
The code: http://jsfiddle.net/RELuL/2/
Any helps appreciated!
P.S.:
Just some bonus question :) As you can see, if you click on the select input, my hidden checkbox section is displayed a little late, it is not shown instantly which looks a little bad. Any tips how to optimize this?
EDIT: I use Firefox 13.0.1
When you click on a <label>, the browser focuses the associated input field. So focus leaves the parent and goes to the checkbox (and your blur event handler is called).
Instead of focusing the parent div and relying on it being blurred, attached a click handler to the document:
$(document).click(function() {
multiSelectUpdate();
});
$('.multiselect.container').click(function(event) {
event.stopPropagation(); // prevent click event from reaching document
});
Also, in Webkit clicking on <select> doesn't fire a click event. A workaround is to use the focus event instead.
Demo
Ok two simple changes got this working first change the click listen on the select box to a mousedown listener like so.
$('.multiselector').mousedown(function(event) {
event.preventDefault();
currentMulti = $(this).attr('id');
thisOffset = $(this).offset();
$(this).hide();
$('#' + currentMulti + '-container')
.css('top', thisOffset.top + 'px').show().attr("tabindex", -1).focus();
$(this).addClass('active');
});
this triggers before the box is able to comes up so it never shows.
Secondly the blur listener was believing it lost focus when a child got focus to fix this change to focusout.
$('.multiselect.container').focusout(function() {
multiSelectUpdate();
});
This only fires when the selector loses focus even focus currently on child of selector.
Fixed fiddle
enjoy :)
EDIT
For some reason blur fires multiple times on FF so to work round this use instead of blur mouseleave.
$('.multiselect.container').mouseleave(function() {
multiSelectUpdate();
});
Is it possible to detect when the user unfocuses an input box using jquery? I.e when they click off of it an event fires.
I believe the blur function is what you are looking for.
$( "input[type=text]" ).blur( function() {
// unfocus event
});
The blur event will fire any time an element loses focus.
If you are trying to determine when any input element on the page loses focus, then use input as your selector.
$("input").blur(function() {
//This event fires every time any input element on the page loses focus
});
If you are only trying to determine when a particular input element on the page loses focus, then using the element's id is the most efficient jQuery selector.
$("#exampleID").blur(function() {
//This event fires if the element with an id of "exampleID" loses focus
});