I know it is possible to use JQuery.Event to simulate "Enter" keypress. Something like this does that -
var event = jQuery.Event( "keydown" );
event.keyCode = 13
$("input").trigger( event );
However, this does not fire the browser default behavior when the actual "Enter" key is pressed. For example, going to next line if the cursor is in textarea or submitting the form when the cursor is in input tag.
I want to know if it is possible to trigger or simulate the actual "Enter" keypress event/behavior.
Try this : Js fiddle
var e = jQuery.Event("keypress");
e.which = 13
$("#test").keypress(function(){
alert('keypress triggered')
}).trigger(e)
Do you want some thing similar this one?
$(function(){
$(document).keypress(function(event) {
if(event.which == 13) {
console.log("Dude! You hit Enter Key!!");
}
});
});
you can use this:
$("body").delegate("input", "keypress",function(e){
if(e.which == 13){
}
}
it's work for all input .
Related
I have the following piece of code in an asp mvc page
$('#regForm').submit(function (event) {
if (event.keyCode == '13') {
event.preventDefault();
}
});
The aim is to prevent the form from submitting when enter is pressed.
We have noticed that in ie 11, this is not working, and on stepping into the code via debug, event.keycode is null. I have been doing some researching on this, and it seems to be an issue because we have the IE-8 Compatibility Meta Tag present on the page, which means that event.keyCode (and event.which) returns undefined for the event, and so my form is always submitted.
So how do I rewrite this to get round the issue?
You need to use the keypress event, not form submit
$('#regForm').keypress(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
Try something like this, use window.event:
$('#regForm').submit(function (e) {
var keyCode = (window.event) ? e.which : e.keyCode;
if (keyCode == '13') {
e.preventDefault();
}
});
Use type="button" attribute with <button> element
So that IE thinks the button as a simple button instead of a submit button.
So form will not submit
You can also get more details from below url
http://tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/
$('#regForm').keypress((event) => {
if (event.key === "Enter") {
event.preventDefault();
}
});
I want to disable the "Enter" button on the keyboard so that when the user press enter to submit the form, nothing happens, and doing something else rather than submitting the form, such as alerting "Using keyboard is not allowed."
Here is what I have done, #calculator is a button:
$(document).ready(function(){
$("#calculator").keydown(function(){
console.log("Enter is disabled.");
return false;
});
});
Currently on its submission the form results unexpectedly (for instance redirects to the target page but without any CSS loaded.
$(document).on('keypress', function(e){
if(e.which == 13) {
e.preventDefault();
}
});
You can use .keypress() event to check which key was pressed then check the code of the key using e.keycode or e.which, if it's 13 then prevent submitting form:
$(document).keypress(function(e){
var code = e.keyCode || e.which;
if (code == 13 ) {
e.preventDefault();
return false;
}
});
For it, don't use submit button.
Use a div, style it like a button and submit the form using javascript on click of the div :)
Try this
For Disabling Keyboard
document.onkeydown = function (e) {
alert('Using keyboard is not allowed')
}
For Disabling Enter
$(document).on('keypress', function(e){
if(e.which == 13) {
e.preventDefault();
}
});
Is there any way how to submit form when you press some predefined key on your keyboard (for example ; key)? I was thinking about something with onkeypress, but dont know how to set it just for one specific key.
Yes, and you were right with thinking onkeypress, just pass in the event, and check which key is pressed with event.which:
function keyPressed(event) {
if (event.which == 186) //keycode for semi-colon
console.log("Semi-colon pressed!");
}
}
Now just attach this function to a keypress handler.
Edit: Got the keycodes from here: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
You'll want to get the keycode and submit the form if it's the right keycode.
To get the keycode from an event, do:
$(document).on("keypress", function(event) {
var keyCode = event.keyCode;
var keyWhich = event.which;
if(keyCode = 'yourkey' || keyWhich = 'yourkey') {
$(form).submit();
}
});
For a full list of keycodes to replace 'yourkey' with, I'd recommend something like this cheat sheet. Just type your key in the input and use whatever value it provides as your function's logic
You can do this in jQuery:
$(document).ready( function() {
$(document).keydown(function(e){
if (e.keyCode == 186) { // ; key
$('#theform').submit();
}
});
});
See fiddle.
I have a web application where on one specific screen I have to make sure the user clicked the button using the mouse as opposed to just pressing enter or space.
I have written this code:
$('button').keydown(function (e) {
if (e.which === 10 || e.which === 13 || e.which === 32) {
return false;
}
});
However, this only works for enter. The form can still be submitted by pressing space on a button. I am just wondering what caused this inconsistency and how to get around it?
Edit:
Example fiddle: http://jsfiddle.net/billccn/3JmtY/1/. Check the second check box and pressing enter while the focus is on the button will have no effect. If I further disable the input and expand the keydown trapping to the whole form, then enter cannot be used to submit the form.
Edit 2:
I do have a backup plan which is replacing the button with a link or even a plain div and use the click event to submit the form programmatically. However, extra work is required to make it look like a button so I'd rather use a button is possible.
Just found out: handling space (32) on keyup will prevent the click event.
Updated fiddle: http://jsfiddle.net/3JmtY/2/
Missed the Point of your Question. After some googleing if found the following trick:
Bind the keypress event to your from and listen to it's keycode. If the keycode is 13
(enter), prevent all default actions (event.preventDefaul()) and prevent further event bubbeling ( return false; ).
Her is a fiddler code example:
HTML:
<form id="target" action="destination.html">
<input type="text" value="Hello there" />
<input type="submit" value="Go" />
</form>
<div id="other">Trigger the handler</div>
JavaScript:
$('#target').keypress(function (event) {
var code = event.keyCode || event.which;
if (code == 13) {
event.preventDefault();
return false;
}
});
$('#target').submit(function (event, data2) {
debugger;
alert('test');
return false;
});
Fiddler: http://jsfiddle.net/ggTDs/
Note that the form is not submited when enter is clicked!
Use below code. 13 for Enter key and 32 for Spacebar.
$("#form_id").on('keydown keyup keypress', function( e ) {
if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
e.preventDefault();
return false;
}
});
I’m working with basic HTML <input type="text"/> text field with a numeric value.
I’m adding JavaScript event keyup to see when user presses arrow up key (e.which == 38) – then I increment the numeric value.
The code works well, but there’s one thing that bugs me. Both Safari/Mac and Firefox/Mac move cursor at the very beginning when I’m pressing the arrow up key. This is a default behavior for every <input type="text"/> text field as far as I know and it makes sense.
But this creates not a very aesthetic effect of cursor jumping back and forward (after value was altered).
The jump at the beginning happens on keydown but even with this knowledge I’m not able to prevent it from occuring. I tried the following:
input.addEventListener('keydown', function(e) {
e.preventDefault();
}, false);
Putting e.preventDefault() in keyup event doesn’t help either.
Is there any way to prevent cursor from moving?
To preserve cursor position, backup input.selectionStart before changing value.
The problem is that WebKit reacts to keydown and Opera prefers keypress, so there's kludge: both are handled and throttled.
var ignoreKey = false;
var handler = function(e)
{
if (ignoreKey)
{
e.preventDefault();
return;
}
if (e.keyCode == 38 || e.keyCode == 40)
{
var pos = this.selectionStart;
this.value = (e.keyCode == 38?1:-1)+parseInt(this.value,10);
this.selectionStart = pos; this.selectionEnd = pos;
ignoreKey = true; setTimeout(function(){ignoreKey=false},1);
e.preventDefault();
}
};
input.addEventListener('keydown',handler,false);
input.addEventListener('keypress',handler,false);
I found that a better solution is just to return false; to prevent the default arrow key behavior:
input.addEventListener("keydown", function(e) {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);
Actually, there is a better and simpler method to do this job.
$('input').bind('keydown', function(e){
if(e.keyCode == '38' || e.keyCode == '40'){
e.preventDefault();
}
});
Yes, it is so easy!
In my case (react) helped:
onKeyDown = {
(e) => {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') e.preventDefault();
}
}
and onKeyUp was fully functional
I tested the code and it seems that it cancels the event but if you don't press the arrow for very short time - it fires keypress event and that event actually moves cursor. Just use preventDefault() also in keypress event handler and it should be fine.
Probably not. You should instead seek for a solution to move the cursor back to the end of the field where it was. The effect would be the same for the user since it is too quick to be perceived by a human.
I googled some and found this piece of code. I can't test it now and it is said to not to work on IE 6.
textBox.setSelectionRange(textBox.value.length, textBox.value.length);