To move focus on the end of inputs when user click the input box,
I use something like this,
$(function() {
$('#test-input').on('click', function(evt) {
$target = $(evt.target);
var val = $target.val();
$target.val('').val(val);
});
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test" id="test-input" value="abcdefgh" />
But if I change the 'click' to 'focus', it doesn't work.
$(function() {
$('#test-input').on('focus', function(evt) {
$target = $(evt.target);
var val = $target.val();
$target.val('').val(val);
});
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test" id="test-input" value="abcdefgh" />
How different onClick and onFocus actions in that case?
There's some differences:
onClick: This event is fired whenever the user clicks in an object, like a button, an image, an input... After the click, then comes the:
onFocus: This event is fired when an element is selected, it doesn't need to be clicked, it can be done programmatically, calling .focus() or using the Tab key, for example. Also, using onfocus instead of onclick, can help to avoid bubbling.
To finish, use the snippet below (I added more inputs, cycle through it with TAB (or click too), you'll see the caret going to end on all of then.
Why I added a timeout?
Chrome Browser has an odd quirk where the focus event fires before the cursor is moved into the field, so, the event must wait to the cursor to get there before moving it to the end.;
$(function() {
$('.test-input').on('focus', function(evt) {
that = this;
setTimeout(function() {
that.selectionStart = that.selectionEnd = 10000;
}, 1);
});
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test" class="test-input" value="abcdefgh" />
<input type="text" name="test" class="test-input" value="a1b2c3" />
<input type="text" name="test" class="test-input" value="abcdefghijklmnop" />
Extra:
If you are programming just for mobiles, will be nice to take a look at touchEvents (https://developer.mozilla.org/pt-BR/docs/Web/Events/touchstart)
This should be working just fine the first time you click on the textbox. This is when the focus event is triggered, since you're actually 'focusing on' the item. From then on, until you click anywhere outside the element, your item will already have the focus and therefore will not execute the onfocus event.
The main difference is focus event call any time when you will focus on input field like if you use tab button and focused on input field but in case of click you need to click on input field.
I think that it has to do with the fact that the code executed at the click is executed before focusing on the input and affecting a position to the cursor.
On the other hand, when you listen to the focus event, the cursor has already a position and stays at this position.
That's pure personal theory. However, if you want to make it work, I found a great solution that works in Chrome on this question: Use JavaScript to place cursor at end of text in text input element
You need to clear the value of the input, wait for one millisecond, and reapply the value:
$(function() {
$('#test-input').on('focus', function(evt) {
$target = $(evt.target);
var val = $target.val();
$target.val('');
setTimeout(() => {
$target.val(val)
},1)
});
})
Related
I want to fire the JQuery change event when the input text is changed programmatically, for example like this:
$("input").change(function(){
console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
But it doesn't work. How can I make this work?
change event only fires when the user types into the input and then loses focus.
You need to trigger the event manually using change() or trigger('change')
$("input").change(function() {
console.log("Input text changed!");
});
$("input").val("A").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' />
The event handler .change() behaves like a form submission - basically when the value changes on submit the console will log. In order to behave on text input you would want to use input, like below:
$("input").on('input', function(){
console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
What you need to do is trigger the change event after you've set the text. So you may create a function to do that so you won't have to repeat it every time you need to update the text, like this:
function changeTextProgrammatically(value) {
$("input").val( value );
$("input").trigger( 'change' ); // Triggers the change event
}
changeTextProgrammatically( "A" );
I've updated the fiddle,
You can use the DOMSubtreeModified event:
$('input').bind('DOMSubtreeModified',function(){...})
If you want to fire both user and code changes:
$('input').bind('input DOMSubtreeModified',function(){...})
This event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...
jquery change event only works when the user types into the input and then loses focus. So you can use the following workaround to do so:-
Let's say you have a button clicking on which results in change in value of input. (this could be anything else as well instead of a button)
var original_value = $('input').val();
$('button').click(function(){
var new_value = $('input').val();
if(original_value != new_value ){
//do something
}
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})
I want to fire the JQuery change event when the input text is changed programmatically, for example like this:
$("input").change(function(){
console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
But it doesn't work. How can I make this work?
change event only fires when the user types into the input and then loses focus.
You need to trigger the event manually using change() or trigger('change')
$("input").change(function() {
console.log("Input text changed!");
});
$("input").val("A").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' />
The event handler .change() behaves like a form submission - basically when the value changes on submit the console will log. In order to behave on text input you would want to use input, like below:
$("input").on('input', function(){
console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
What you need to do is trigger the change event after you've set the text. So you may create a function to do that so you won't have to repeat it every time you need to update the text, like this:
function changeTextProgrammatically(value) {
$("input").val( value );
$("input").trigger( 'change' ); // Triggers the change event
}
changeTextProgrammatically( "A" );
I've updated the fiddle,
You can use the DOMSubtreeModified event:
$('input').bind('DOMSubtreeModified',function(){...})
If you want to fire both user and code changes:
$('input').bind('input DOMSubtreeModified',function(){...})
This event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...
jquery change event only works when the user types into the input and then loses focus. So you can use the following workaround to do so:-
Let's say you have a button clicking on which results in change in value of input. (this could be anything else as well instead of a button)
var original_value = $('input').val();
$('button').click(function(){
var new_value = $('input').val();
if(original_value != new_value ){
//do something
}
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})
I have written a blur() event to handle focus out event on a text field. The code looks like this.
$("input[type=text]").blur(function (event) {
if(this.value){
//do something
}
event.originalEvent.handled = true;
});
I have a situation where a text-field is automatically getting focus with the text from previous page.
To give an example, in flipkart.com, type some text in the search field and click search. My event handler must execute for focus out event. (It is happening correctly).
In the next page, the text entered is prepopulated in the text-field and focus is also on it. So in this page, if I do some action, the text-field will lose focus and the same event gets called again. I don't need this to happen.
Is there a way to avoid this? By combining two event handlers? Please help.
Change your code so that the function is only bound to the element after a user explicitly interacts with the element like so:
$("input[type=text]").on('keyup keypress change click', function() {
$("input[type=text]").blur(function(event) {
if (this.value) {
//do something
alert('blur was called after interacting with element');
}
event.originalEvent.handled = true;
});
});
$('#test').focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="some value">
Try this : You know the text value from previous page, just compare it with current text value, if both same then don't do any action. See below code
$(function(){
var prevTextValue = "read your previous text value here";
$("input[type=text]").blur(function (event) {
//check if value is not empty and not equal to previous value
if(this.value!="" && this.value != prevTextValue){
//do something
}
event.originalEvent.handled = true;
});
});
Does anyone know how to make a simple JavaScript onclick event fire if the process of clicking the element causes an onchange event to fire elsewhere on the page? I've created a very simple page to demonstrate this problem:
<html>
<body>
<input type="text" name="test" id="test1" onchange="return change(event);" />
Bang
Boom
<script type="text/javascript">
function change(event) {
alert("Change");
return true;
}
function bang() {
alert("Bang!");
return true;
}
function boom() {
alert("Boom!");
return true;
}
</script>
</body>
</html>
If you click the bang link you get the Bang! alert. Boom gives you the Boom alert. And if you enter text in the text field and tab out you get the Change alert. All well and good.
However, if you enter text in the text field and, without tabbing or clicking anything else first, click either Bang or Boom you get the Change alert and nothing else. I would expect to see the Change alert followed by either Bang or Boom.
What's going on here? My change event returns true. How can I ensure that my click event is fired?
Okay... So it seems like it's time for a bit of an explanation.
Explanation
You encounter this error because the onchange event is triggered as soon as focus is moved away from the element. In your example the action that takes focuse away from the input element is the mousedown event which triggers as you click down on the mouse. This means that when you mousedown on the link it fires off the onchange function and pops up the alert.
The onclick event on the other hand is triggered on the mouseup event (i.e. when you release the pressure on the mouse - prove this to yourself by click, hold/pause, release on a onlcick event). Back to your situation... Before the mouseup (i.e. onclick) happens the focus is moved to the alert triggered from your onchange function.
Fix
There are a couple of options to fix this. Most simple change from using onclick="...." to onmousedown="....".
Alternatively, you could use setTimeout like,:
function change() {
setTimeout(function (){
alert("Change event")
}, 100)
}
I suggest the onmousedown method as preferred. The setTimeout method will fail if you click and hold on the link for more than the prescribed amount on the timeout.
The problem is that the alert() function grabs the event chain somehow, test this:
<html>
<body>
<input type="text" name="test" id="test1" onchange="return change(event);" />
Bang Boom
<script type="text/javascript">
function change(event) {
console.log("change");
return true;
}
function bang() {
console.log("bang");
return true;
}
function boom() {
console.log("boom");
return true;
}
</script>
</body>
As you'll see you'll get the expected behaviour in the console.
JSBin
Rather than try and replicate your problem, I just created the solution in jsFiddle.
I seperated your HTML and your JavaScript.
HTML
<input type="text" name="test1" id="test1" />
Bang
Boom
JavaScript
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");
test1.onchange = function (event) {
alert("Change");
};
test2.onclick = function () {
alert("Bang!");
};
test3.onclick = function () {
alert("Boom!");
};
After making a change in the text box and click out side of it will trigger the onchange event, and the onclick events will still fire. If you are expecting the change alert to fire for each key stroke change onchange to onkeyup.
I have an input element and I want to keep checking the length of the contents and whenever the length becomes equal to a particular size, I want to enable the submit button, but I am facing a problem with the onchange event of Javascript as the event fires only when the input element goes out of scope and not when the contents change.
<input type="text" id="name" onchange="checkLength(this.value)" />
----onchange does not fire on changing contents of name, but only fires when name goes out of focus.
Is there something I can do to make this event work on content change? or some other event I can use for this?
I found a workaround by using the onkeyup function, but that does not fire when we select some content from the auto completer of the browser.
I want something which can work when the content of the field change whether by keyboard or by mouse... any ideas?
(function () {
var oldVal;
$('#name').on('change textInput input', function () {
var val = this.value;
if (val !== oldVal) {
oldVal = val;
checkLength(val);
}
});
}());
This will catch change, keystrokes, paste, textInput, input (when available). And not fire more than necessary.
http://jsfiddle.net/katspaugh/xqeDj/
References:
textInput — a W3C DOM Level 3 event type. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents
A user agent must dispatch this event when one or more characters have
been entered. These characters may originate from a variety of
sources, e.g., characters resulting from a key being pressed or
released on a keyboard device, from the processing of an input method
editor, or resulting from a voice command. Where a “paste” operation
generates a simple sequence of characters, i.e., a text passage
without any structure or style information, this event type should be
generated as well.
input — an HTML5 event type.
Fired at controls when the user changes the value
Firefox, Chrome, IE9 and other modern browsers support it.
This event occurs immediately after modification, unlike the onchange event, which occurs when the element loses focus.
It took me 30 minutes to find it, but this is working in June 2019.
<input type="text" id="myInput" oninput="myFunction()">
and if you want to add an event listener programmatically in js
inputElement.addEventListener("input", event => {})
As an extention to katspaugh's answer, here's a way to do it for multiple elements using a css class.
$('.myclass').each(function(){
$(this).attr('oldval',$(this).val());
});
$('.myclass').on('change keypress paste focus textInput input',function(){
var val = $(this).val();
if(val != $(this).attr('oldval') ){
$(this).attr('oldval',val);
checkLength($(this).val());
}
});
Do it the jQuery way:
<input type="text" id="name" name="name"/>
$('#name').keyup(function() {
alert('Content length has changed to: '+$(this).val().length);
});
You can use onkeyup
<input id="name" onkeyup="checkLength(this.value)" />
You would have to use a combination of onkeyup and onclick (or onmouseup) if you want to catch every possibility.
<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />
Here is another solution I develop for the same problem. However I use many input boxes so I keep old value as an user-defined attribute of the elements itself: "data-value". Using jQuery it is so easy to manage.
$(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
var self = e.data.self;
if (e.keyCode == 13) {
e.preventDefault();
$(this).attr('data-value', $(this).val());
self.filterBy(this, true)
}
else if (e.keyCode == 27) {
$(this).val('');
$(this).attr('data-value', '');
self.filterBy(this, true)
}
else {
if ($(this).attr('data-value') != $(this).val()) {
$(this).attr('data-value', $(this).val());
self.filterBy(this);
}
}
});
here is, I used 5-6 input boxes have class 'filterBox',
I make filterBy method run only if data-value is different than its own value.