I would like to realize a keypress event for typing a string into an input elements by Jquery, I know Jquery can listen the event of keypress, keydown and keyup. But, what I want to do is using the Jquery to realize the action of keypress and put the value of which key I pressed into the input elements. Is that possible by jQuery to realize this task?
Is this what you want?
WORKING FIDDLE
$('.input').on('keypress', function(event) {
event.preventDefault();
$(this).val(event.keyCode);
});
$( ".input" ).trigger( "keypress" );
// Target input element and bind to the "keyPress" event.
$('.input').on('keypress', function(event) {
// Prevent the default action to stop the key character being entered into the field
event.preventDefault();
// Add the event's keyCode into the field
$(this).val(event.keyCode);
})
http://codepen.io/anon/pen/XXNOQd?editors=101
Related
Having an input element
<input type="text">
if i add keydown event on it , it will work with state x - 1 value of input e.g
var x = document.getElementsByTagName("input")[0];
x.addEventListener("keydown",function(){
alert(x.value);
},false);
if i input "a" , it will print empty string , when i add "b" it wont print "ab" but "a" ( state - 1 )
Is there any simple way how to retrieve current value not previous?
Use input instead of keydown event.
If you require older browser support then you should also listen for keyup and mouseup (drag/drop) events.
Use keyup event or keypress event.
Reason is simple, when you are typing, there are three states.
When the key is pressed and held(even for a very short time). Here, the input field is not yet updated. This is keydown
keyup is when the key is released. That is when the input field is updated.
keypress is keydown and keyup both combined. (For alphanumeric keys)
As pointed in other answers, you can use keyup or keypress or input if you don't need to cancel event.
If you do need to cancel event (conditionally) then keydown is the must.
var x = document.getElementsByTagName("input")[0];
x.addEventListener("keydown",function(e){
//alert(x.value);
console.log(x.value + String.fromCharCode(e.which || e.keyCode);
},false);
The event doesn't support character value but you can receive it from keyCode.
Is anybody else having problems with the keyup event in iOS 9 not firing?
Just a simple test bed replicates the issue for me.
<input id="txtInput" />
Vanilla JS:
document.getElementById('txtInput').onkeyup = function () {
console.log('keyup triggered');
}
jQuery:
$('#txtInput').on('keyup', function () {
console.log('keyup triggered');
});
Neither fire...
I suggest using the keypress event on browsers with touch screens. I know that you can't really detect touch screen screens, though, so it leaves you with a few options that your situation will likely dictate.
Attach both events keyup and keypress. This would likely be dependent on how much processing is going on and if you are getting double-fires in some browsers.
Attempt to determine whether the browser is a touch screen (like using Modernizr), and then attach a fallback handler like change.
Either way, you end up with two event listeners.
$('#yourid').bind('keypress', function(e) {
// This will work
});
It's not pretty, but a work around is to bind to keydown to capture which key has been pressed, and input if you want to obtain the value, including the key typed:
(function () {
var keyCode;
$('#txtInput')
.on('keydown', function (e) {
// value not updated yet
keyCode = e.keyCode;
// Enter key does not trigger 'input' events; manually trigger it
if (e.keyCode === 13) $(this).trigger('input');
})
.on('input', function (e) {
console.log(keyCode, this.value);
});
}());
If you type 'a' the following occurs:
keydown fires.
e.keyCode is set to the ASCII value of the key pressed.
this.value is '' (i.e. the same before 'a' has been typed).
input fires.
e.keyCode is undefined.
this.value is 'a'.
You can also manually trigger an input event if the enter (13) key is pressed; input isn't fired by this key by default.
I'm using jquery copy paste methods to do something when text is pasted into my text area
$(function(){
$("#input").bind({
paste : function(){
show_ln();
$("#t2").scrollTop($("#input").scrollTop());
}
});
});
But I want to do something else when any other keypress within #input is done.
$("body").on("keypress", "#input", function(){
show_ln();
});
Is there any way to bind that second keypress to everything but a paste?
Yes you can use keyup event instead or lookup for the keyCode in keypress listener.
$("body").on("keyup", "#input", function(event){
// For the case paste also fires this event you can have a look on keyCode.
if(event.keyCode!=="NUMBER_OF_PASTE"){
show_ln();
}
});
On my website I have several input fields in a form. I want the user to be able to submit the form on any of the fields by hitting the enter key. However, this causes an issue because in Internet Explorer and Safari if the user types a few letters and an autocomplete dropdown opens and they use arrow keys and hit enter to do the autocomplete, the form will submit.
How can I change this behavior?
Also note that I have a custom function for "submitting". It is not the default submit.
Here is my jQuery code:
$('.submitButton').click( submitContactForm );
$('.column input, .submitButton').keydown(function( e ){
if( e.keyCode == 13 ){// if 'enter' key
$('.submitButton').click();
}
});
I have decided to use the safeEnter jQuery plugin. Looks like it will solve this problem nicely.
you need add onkeydown event on dropdown of autocomplete and return false in function.
if you need to prevent form from submitting, you should call preventDefault() method on the event object in the event Handler.
element.onkeydown = function(event){
var event = event || window.event;
event.preventDefault();
var code = event.keycode || event.which;
if(code === 13){
// Your enter behavior
}
}
you can prevent event from bubbling up the DOM by calling event.stopPropagation();. if your autocomplete is the somewhere in your form this will help not to fire the event on the form but only on autocomplete.
I'm trying to simulate a keypress with the below code...
jQuery('input[name=renameCustomForm]').live('keyup', function (e) {
console.log('pressed');
});
jQuery('body').click(function (e) {
console.log(jQuery('input[name=renameCustomForm]'));
var press = jQuery.Event("keypress");
press.which = 13;
jQuery('input[name=renameCustomForm]').trigger(press);
});
I got this code from other posts on SO, but it doesn't work. Anyone know why?
Update
Fixed it... it appears triggering "keypress" doesn't automatically trigger "keyup"
Normally, when a user adds something to an inout field, the following events occur:
keydown (once).
keypress (at least once, additional events uccur while the key is pressed down)
keyup (once)
When a key event is simulated, it's not necessary that all events occur in this order. The event is manually dispatched, so the normal event chain isn't activated.
Hence, if you manually trigger the keypress event, the keyup event won't be fired.
You code will trigger a keypress each time you click anywhere on the page..
For your case it might be better to use the .blur() event of the input box..
jQuery('input[name=renameCustomForm]').live('keyup', function (e) {
console.log('pressed');
}).live('blur', function(){
var self = $(this);
console.log( self );
var press = jQuery.Event("keyup");
press.which = 13;
self.trigger( press );
});