I have got an HTML form with many input boxes. At the paste event on any of my input boxes I would like to set the focus on the following one.
Here is the code I am currently using:
$("input").bind('paste', function(e) {
var inputs = $(this).closest('form').find(':input');
//alert(e.originalEvent.clipboardData.getData('Text'));
inputs.eq( inputs.index(this)+ 1 ).focus();
});
What happens with this code is the following. Let's say I have got input boxes "A" and "B". I paste a text into "A"; the function changes the focus on "B" and then save the text into "B". Nothing is pasted into "A".
Of course I would like the content to be pasted into "A" and then the focus switched to "B".
Is there a way to obtain this latter behaviour?
You want your paste event to trigger before changing focus, and so you need to finish your bind callback before calling the focus.
What you should do is to defer your focus call. You can use setTimeout and delay by 0 milliseconds - basically, call after your paste function ends.
$("input").bind('paste', function(e) {
var inputs = $(this).closest('form').find(':input');
var self = this;
setTimeout(function(){
inputs.eq( inputs.index(self)+ 1 ).focus();
}, 0)
});
http://jsfiddle.net/6utcnaq3/1/
Here's a one liner. You just need to introduce some delay.
$("input").on('paste', function(e) {
var $this = $(this);
setTimeout(function () {
$this
.closest('form')
.find('input')
.eq($this.index() + 1)
.focus();
}, 100);
});
Related
I am having jquery as follows,
$(document).on('click', '.save_button', function (e) {
var amount = $('.actual_pay').val();
});
Which means when a user clicks the button with class save_button, the script executes and sets the value of the var amount to the value of the field with class actual_pay.
Up to this no problems and it is working fine, but the input box with class name actual_pay is editable and any time the value can be changed, I have to detect the changed value of the input box, for which i have tried with
var amount = $('.actual_pay').val().change();
But it is showing error:
.change is not a function.
How to detect the change happening to the class actual_pay and to store the changed value to the amount variable?
You can attach an input event listener.
var amount;
$('.actual_pay').on("input", function(){
console.log("Something is changed in actual_pay");
amount = $(this).val(); // save val
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="actual_pay">
Actions which invoke input events are
Entering some text into an element.
Cutting, deleting or pasting some content.
Dropping some content into an element. (only in Google Chrome and Safari)
$('.actual_pay').val().change(); won't work because this is wrong approach. You can do by following method
$('.actual_pay').on('input',function(){
alert('Something Modified');
});
You can get value of that input box with this function:
$( "input.actual_pay" ).keyup(function() {
var amount = $(this).val();
});
If you are changing that input manually, you will use 'keyup', otherwise you should use
$( "input.actual_pay" ).change(function() {
var amount = $(this).val();
});
I have a script that adds up data-attributes from checkboxes, I modified the script to be able to allow users to manually add their own entries into a text input that the keyup function copies into the data-cost="" and debt="" attributes, which a plugin recalculates the total into the blue div box on the right side in this Fiddle. This functionality works, as you can see in the fiddle
But I also want data that is copied into the data-attributes to also be copied into the value="". The plugin uses the value to display it in the yellow summary box on the right, but every time I modify the keyup script, the calculation stops working and the value does not show up in the summary.
Here is the Fiddle
This is the keyup script:
function calculateTotalFor(){
$('#jquery-order-form').data('jprice').onChange();
}
$(function () {
$(document).on('keyup blur paste', '.balance', function() { //Changed here
var $self = $(this),
$checkbox = $self.closest('li').find('input:checkbox');
setTimeout(function() {
var str = $self.val();
$checkbox.data('cost',str.replace(/^\$/, ''));
$checkbox.data('debt',str.replace(/^\$/, ''));
calculateTotalFor();
}, 0)
})
});
I added $checkbox.val(str.replace(/^\$/, '')); before calculateTotalFor(); and it seems to work.
I want to set up an onBlur event for an input element that validates the value and, if invalid, "cancels" the blur and refocusses(or focus never loss) the current input.
i have this peace of code already
document.getElementById('my_input_id1').onblur = function() {
var self = this;
setTimeout(function() { self.focus(); }, 10);
}
Suppose my next focused element is'my_input_id2' which also has an "onblur" event.as focus is already moved to 'my_input_id2'.When i set focus back to 'my_input_id1' the second elment 'my_input_id2' "onblur event is fried.I want to cancel onblur event of second element.i have many other element with "onlur" for Validation.
Can i stop elemnt not to lost focus?
Is there another function that can do it without lost focus??
Should i use some other function that does not lose focus??
Is there another way to get out of this problem??
Many many thanks in advance.
Try it
$('#my_input_id1').on('blur',function(){
if(SOME CONDITION){
setTimeout(function(){
$('#my_input_id1').focus();
},100);
return false;
}
});
This is quite straight forward to do with JavaScript:
document.getElementById('id1').onblur = function(e) {
if(this.value.length == 0) {
this.focus();
e.preventDefault();
return false;
}
}
Essentially just refocusing the element based on a criteria, of course this can be anything you want it to be.
and here is the fiddle: http://jsfiddle.net/m4cZ2/1/
I have an input and an event handler attached to it and for some reason, the keyup event is not working. I have looked at this a while and can't figure out what the problem is. The alert window is not even showing as I type something into the input box.
$(function () {
var tagField = $("#<%= EditTagNum.ClientID %>"); //asp.net code to get the generated client ID
$(tagField).on('keyup paste cut', function () {
alert('inside event handler');
var _this = this;
//because the paste event fires before the text has actually been
//pasted, I have to set a timeout. Once the timeout occurs, the text
//has then been entered into the input box.
setTimeout(function () {
var text = $(_this).val();
$(_this).val(text.replace(/\D/g, ''));
}, 0);
});
});
Update:
I changed my code to use the generated client id directly as so:
$("#ctl00_ContentPlaceHolder1_EditTagNum").on(.....
This did not solve the problem. BUT I did discover that once I run my event handler function in the console, then it works. It is if the event handler is never attached. Yet, when I am debugging in chrome I see that it reaches the function to attach the handler. It just never gets inside of it.
You can check if this works:
$(tagField).keyup(function() {
instead of
$(tagField).on('keyup paste cut', function () {
var tagField = $("#<%= EditTagNum.ClientID %>");
Here tagField is itself a jquery object. And you are wrapping this object again in jquery. Try following :
tagField.on('keyup paste cut', function () {
alert('inside event handler');
var _this = this;
//because the paste event fires before the text has actually been
//pasted, I have to set a timeout. Once the timeout occurs, the text
//has then been entered into the input box.
setTimeout(function () {
var text = $(_this).val();
$(_this).val(text.replace(/\D/g, ''));
}, 0);
});
});
It should work.
Instead of this : 'keyup paste cut', try this .. "keyup paste cut" ..
Worked for me magically in past ... ! :)
You can use
$(document).on('keyup', tagField, function() {...});
instead, if you are not sure that tagField is attached to the DOM at the time that you call $(tagField).on('keyup', tagfield, ...);
I have an input text that I need detect when the text (value) change.
The value can be changed in two ways:
Allow to the user write in it.
The user click a button, runs a jQuery event and fill it with the
result.
For the item 1 I solved using keyup but for the item 2 I have no idea how can I detect when the text is changed.
I try change() but does not work.
You can use .trigger() inside your function where you fill the input.
$("#idOfButton").click(function() {
//do some stuff
//fill input
$("#edit").val("new stuff!").triggerHandler("keyup"); //<--Trigger keyup event
});
Demo: http://jsfiddle.net/Q8fCa/1
Add event handler on change() for item2 and in item1 keyup handler, trigger item2 change() event. Simple like that...
"runs a jQuery event and fill it with the result."
you can call another function from your jquery event.
$('sel').click(function(){
textedited(); // call your new function.
});
You can create an interval that checks whether the value of the input field has changed in every occasion (user input or button click) :
var oldValue = $('#field').val();
var newValue = oldValue;
var checkInputFieldInterval = window.setInterval(function() {
newValue = $('#field').val();
if (newValue !== oldValue) {
// VALUE CHANGED, DO STUFF
oldValue = newValue;
}
}, 100);
Note the the "100" is the interval period in ms. You can find more information about the setInterval() method on this page http://www.w3schools.com/jsref/met_win_setinterval.asp
You can do...
$('.name').on('keyup', function(){
/* I'll run when the button is clicked or there's a keyup event. */
})
$('button').on('click', function(){
$('.name').val('Bill').trigger('keyup');
})
Here's a quick demo: http://jsbin.com/uteceb/1/edit