when I change the value of a text input and then blur that input it triggers the input change event again. How can it register this blur as an input change? is there a way to prevent this?
$('input').on('input change',function(){
//do something
});
$(function(){
$('#onchange').on('change',function(){
alert('changed')
});
$('#onEveryLetter').on('input',function(){
alert('onEveryLetter')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
onchange: <input type="text" id="onchange" name="Jenish" />
<br/>
onEveryLetter: <input type="text" id="onEveryLetter" name="Jenish" />
Simply remove the change event from your code. The change event is fired onblur, but only if something has been changed since it was last blurred.
Use:
$('input').on('input',function(){
//do something
});
Jenish's answer is correct. What's more... For those who are using a delegated listener like jQuery .on(), Here is an example that allows you to capture all the change events on the other form elements (textarea, select, etc) and ignore the change event triggered by a blur on text INPUTs.
$('div').on('input change',function(e){
// This will keep the text INPUT from triggering for change event on blur.
if(e.type == 'change' && e.target.nodeName == 'INPUT') {
return false;
}
// Text INPUTs still pick up on the input event here
});
Related
I have an input field and a button. It is necessary that when the button is clicked the input field gets focus.
I need the behaviour to be slightly different depending on whether the input field was focused manually by the user or if it was focused due the button being clicked.
It seems this would be relatively simple, but I couldn't come up with a solution so far. Any ideas very welcome.
$("button").click(function() {
target_input = $("input");
target_input.focus();
});
$("input").focus(function() {
// if focus done manually by user
// do something
// if focus done via button
// do something else
});
Here is a solution that uses no extra variables, instead it checks the event.
$("button").click(function() {
target_input = $("input");
target_input.focus();
});
$("input").focus(function(e) {
// if focus done manually by user
// do something
// if focus done via button
// do something else
if(e.originalEvent.relatedTarget){
// only from button events
}
// here is from all events
});
this e.originalEvent.relatedTarget will return null if we didn't use the button to originate the focus.
remember to add e to the function.
You should be able to use Event.isTrusted for this:
The isTrusted read-only property of the Event interface is a boolean
that is true when the event was generated by a user action, and false
when the event was created or modified by a script or dispatched via
dispatchEvent.
$("input").focus(function(e) {
if(e.isTrusted) {...} else {...}
});
As noted in the comments, neither IE nor Safari like this.
This works without global variables and it is cross-browser working solution:
$('button').click(function () {
$(this).prev('input').focus()
})
$('input').click(function (e) { // yes, listen to click instead
// original event exists only if input was clicked directly
if (e.originalEvent) {
console.log('manually triggered')
}
})
<div style="background-color: yellow;">
<input type="text">
<button>Focus input</button>
<br>
<input type="text">
<button>Focus input</button>
</div>
<script src="https://unpkg.com/jquery"></script>
I wonder how to set the focus to an input field on the mouseover event.
I wonder how to onload input field or onfocus field for typing when onmouseover to it so it easily ready to type when cursor touching or onmouseover cursor to input field of search box.
You can use the focus() method to focus an HTML element. Here's an example of its usage:
var inputField = document.getElementById('idOfYourInputField');
inputField.addEventListener('mouseover', function() {
inputField.focus();
});
Not sure what you are expecting here but if you want something like at certain position on page if user moves mouse you want the textbox to get Focus you can do something like:
<div id='d1'>
<input type='text' id='txt' value='Search'/>
</div>
and with Jquery:
$().ready(function(){
$('#d1').mouseover(function(){
$(this).children().closest('Input[type=text]').focus();
});
});
Using jQuery:
$('.input-element').mouseover(function() {
$(this).focus();
})
Or if you want to control the focus and blur events
$('.input-element')
.mouseenter(function() {
$(this).focus();
})
.mouseleave(function() {
$(this).blur();
});
is it possible to find out from (jquery) change event handler what triggered the change event - keypress of which key or mouse click?
My use case: I have dynamic list of input[type=text] items, if user fills last empty item I add new input[type=text] for another item. I want to auto-focus it if user pressed tab (which triggered the change event), but not for example when user clicked somewhere (so the change is aslo triggered, but user may want to focus something else).
Simplified example:
https://jsfiddle.net/yxu82p1o/1/
<input type=text>
<script>
function addMore() {
$('input').off('change.addMore');
$('<input type=text>').insertAfter($('input').last()).on('change.addMore', addMore);
}
$('input').on('change.addMore', addMore);
</script>
PS. I can figure out workarounds like attaching another keyup event and figuring out pressed key from it, but it would be much simpler and cleaner to find out from change event what caused it.
This might be an option. Listen for the keydown event on the input elements and if the TAB key triggered the event and the element is an input element trigger the change event on the input element. Then focus the dynamically added input element.
function addMore() {
$('input').off('change.addMore');
$('<input type=text>').insertAfter($('input').last()).on('change.addMore', addMore);
}
$('input').on('change.addMore', addMore);
$('body').on('keydown', 'input', function(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9 && this.tagName === "INPUT") {
e.preventDefault();
$(this).change();
$(':text').last().focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type=text>
I am trying for checking condition for textfield is focus or not
if($.txt_username.foucs() == 'true'){
alert('textfield username focus');
}
else{
alert('textfield username out of focus');
}
any one advice me how to check the condition for textfield is focus () or blur();
add focus and blur events in your code to check when field is focussed and blurred. update boolian variable to set focus or blur state .Check that variable to perform any operation which you want to perform on focus or non focus (blur ) of textField.
$.txt_username.addEventListener('focus', function() {
focussed = true;
});
$.txt_username..addEventListener('blur', function() {
focussed = false;
});
if(focussed){
//do whatever you want when field is focus
}else{
//do whatever you want when field is not focus
}
focus is a jQuery function to set a focus handler function to the element. It doesnt test for whether the element is currently focused.
Example of use of focus:
$( "#target" ).focus(function() {
alert( "Handler for .focus() called." );
});
Could you rewrite your logic so that you are notified when the element is focused? In the focus event handler you could write your code.
blur also works the same way. You can assign a blur handler function using the blur() function.
Testing for focus with JS:
var selected = document.activeElement;
if (selected.id == "myTxtIdUName") {
alert('Field username focused');
}else{
alert('Field username NOT focused');
}
Note: Active element of html page in a background window doesn't have focus. So, if you want to check for that also, you can use selected.hasFocus for more accurate results.
I have the following html code:
<input type="text" id="theInput" value=""/>
Click me
I want to detect when the input changes and perform an operation in this case, but ONLY when the user has not clicked in the link. I have tried this:
$('#theLink').live('click', function(){
alert('click');
});
$('#theInput').live('change', function(){
alert('change');
});
However change is always executed before click when the value in the input changed, due to Javascript event precedence rules, and therefore only "change" message is displayed.
I would like it to display change only if the input value changed and the user exited the input clicking in any other place instead of the link. In that last case I would like to display click.
The example is here.
I use jQuery 1.6.4.
As far as I know, the click event fires after the blur and change events in every browser (have a look at this JSFiddle). The order of blur and change is different across browsers (source: Nicholas Zakas).
To solve your problem, you could listen to click events on the document and compare the event's target with #theLink. Any click event will bubble up to the document (unless it is prevented).
Try this:
var lastValue = '';
$(document).click(function(event) {
var newValue = $('#theInput').val();
if ($(event.target).is('#theLink')) {
// The link was clicked
} else if (newValue !== lastValue) {
// Something else was clicked & input has changed
} else {
// Something else was clicked but input didn't change
}
lastValue = newValue;
});
JSFiddle: http://jsfiddle.net/PPvG/TTwEG/
Both events will fire but in your example the alert in the onchange event handler fired when the onmousedown event occurs will stop the onmouseup event required for the onclick event to fire. Using console.log will show both events firing.
http://jsfiddle.net/hTqNr/4/
Ok, now i got it, you could do
$('#theLink').live('click', function(e){
alert('click');
});
$('#theInput').live('change', function(e){
//Check if the change events is triggerede by the link
if(e.originalEvent.explicitOriginalTarget.data === "Click me"){
//if this is the case trigger the click event of the link
$('#theLink').trigger("click");
}else{
//otherwise do what you would do in the change handler
alert('change');
}
});
Fiddle here http://jsfiddle.net/hTqNr/19/
why you dont pick the value of input box. you have to store initial value of input box on ready function
initialvalue= $('#theInput').val();
then compare the value
$('#theLink').live('click', function(){
var newvalue =$('#theInput').val();
if(newvalue!=initialvalue) {
//do something
}
});