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, ...);
Related
this trigger works correctly ONE time. If it fires again, it just refreshes my page, so I’m guessing that the preventDefault isn’t working. Am I missing something?
function watchForm() {
$(‘form’).submit(event => { //listening for event on the form pop-up menu
event.preventDefault(); //suppresses browser from going to a linked page.
$(’#js-error-message’).empty();
let searchState = $(’#js-stateMenuForm :selected’).val();
getParks(searchState); //calls getParks function.
});
}
Rewrite your function to this below and see if it works:
function watchForm(){
// for every form on the page
$('form').on('submit', function(e){
// empty the error element
$('#js-error-message').empty();
var searchState = $('#js-stateMenuForm :selected').val();
// call the function that uses the value you are looking forward to.
getParks(searchState);
// where e is the event
e.preventDefault();
return false; // force return of the form's submission
});
}
Also, you can check this post: Jquery .on() submit event
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);
});
I'll keep it short and sweet. Trying to implement .select in jQuery and it doesn't seem to be cooperating in Chrome. Clicking in to the input selects the contents only briefly.
$(document).on('focus','.a-thing', function () {
this.select();
});
jsFiddle
this is not a jQuery object
$(document).on({
focus : function () {
$(this).select();
},
mouseup : function() {
return false;
}
}, '.a-thing');
FIDDLE
And you have to prevent the mouseup event to avoid loosing the selection as the mouseup event deselects the text, it's a know issue in Chrome.
Probably due to using the focus event. Try to fire the select event after the focus is complete:
$(document).on('focus','.a-thing', function () {
var self = this;
setTimeout(function() {
self.select();
},1);
});
Updated jsFiddle
User click event instead of foucs, because keyboard tab key will auto select field value without foucs event
$(document).on('click','.a-thing', function () {
this.select();
});
JSFIDDLE DEMO
You can active the select on the mouse up instead of the focus. Chrome seems to de-select on the mouse up event.
$(document).on('mouseup','.a-thing', function () {
$(this).select();
});
Or if you want to keep the focus event, you can prevent the action on mouse up
$(document).on('mouseup','.a-thing', function () {
e.preventDefault();
});
On mouseup event the selection is getting unselected, Please add the following to fix the issue
$(".a-thing").mouseup(function(e){
e.preventDefault();
});
DEMO
I'm trying to add a confirm box to many links, button, or inputs, on the click event.
I can't use location.href, submit(), or other specific features because :
location.href, for example, won't work on a submit button,
location.href, for example, won't trigger other bound handlers.
So what I need to use is the trigger() function, that theorically execute all the handlers AND the native action. The "difficult" part is to execute all handlers, EXCEPT the handler which pop the confirm box.
Here is my code :
$('a, button, input[type="submit"]').each(function() {
var oButton = $(this);
oButton.on('click.pending', function(oEvent) {
console.log('click !');
oEvent.preventDefault();
var oDialog = $('<div class="dialog-example">[Question] ?</div>').dialog({
buttons: {
Cancel: function() {
console.log('cancelled !');
// Nothing to do
oDialog.dialog('close');
},
Ok: function() {
console.log('confirmed !');
// Trigger the rest of the handlers AND the native action, BUT not this one, so this dialog is not used
// Problem : nothing happens here
oButton.trigger('click.confirmed');
oDialog.dialog('close');
}
}
});
});
});
Thanks in advance ! ;)
You should try:
oButton.off('click.pending').trigger('click').get(0).click();
DEMO
The onFocus event keeps firing on page load and doesn't seem to work when the element goes into focus. I only want the alert to fire off when the the input comes into focus not on page load
//Input
var input = document.getElementById('phonenumber');
//onfocus execute function
input.onFocus = alert('test')
You're calling the function alert and assigning its return value (undefined) to the focus handler. Try this instead:
input.onfocus = function() { alert('test'); };
Or, perhaps more understandably:
function inputFocused() {
alert('test');
}
input.onfocus = inputFocused;
Note that there are no parentheses after inputFocused in the assignment. We want to set onfocus to the function itself, not to the result of calling the function.