ie11 Detecting Enter Key pressed - javascript

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();
}
});

Related

window.location.reload(); fails unless coupled with an alert

In my MVC javascript, I have the following code:
addEvent(document.getElementById("mta"), 'keydown', function() {
var keycode = event.which || event.keyCode;
if (keycode == 27) {
//alert(x);
window.location.reload(true);
return
}
etc...
The idea is to clear all input when the user presses the escape key. This doesn't work unless the alert is un-commented. Browser is Firefox. WTH ?
I had early today a similar problem. One of the mistakes I can see is event.keyCode, which is depreciated right now, you can replace it with event.key.
I leave you the code that worked for me.
addEventListener("keyup", function(event) {
if (event.key === "Escape") {
event.preventDefault();
window.location.reload(true);
}
});

don't can use Enter key from textarea

In my project I need diable Enter key for some textbox , because i don't want post page when enter key button . I use this Code for disable Enter key :
$(document).keypress(
function (event) {
if (event.which == '13') {
event.preventDefault();
}
});
Its work fine , but when Add textarea in page , I cant enter key for break line , because Enter key disabled .
how can I enable Enter key for textarea?
I don't know if its recommended to attach a global keypress handler like that. Regardless, the easiest way out would be
$(document).on('keypress',
function (event) {
if (event.which == '13' && event.target.tagName != 'TEXTAREA') {
event.preventDefault();
}
});
In the above, you are checking the tagName of event.target to see if the element in which the enter occured is a textarea or not
However, I would recommend this approach
$('form').on('keypress', 'form',
function (event) {
if (event.which == '13') {
event.preventDefault();
}
});
This will target all input elements and not textarea elements,
You should bind your form to detect the Enter key as,
$('#formid').on("keyup keypress", function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
Here is a demo
By this you will be able to use the Enter key on your text area without submitting the form.

How to handle multiple buttons enter key functionality?

In my page there are two buttons. For enter key functionality I have written the following jQuery code.
$(function () {
$("#first-button-id").keyup(function (e) {
if (e.keyCode == '13') {
e.preventDefault();
}
}).focus();
$("#second-button-id").keyup(function (e) {
if (e.keyCode == '13') {
e.preventDefault();
}
}).focus();
});
But always when click on enter key first one is firing. Please tell me how to handle the multiple button enter key functionality.
Try something like this
HTML :
<label>TextBox : </label>
<input id="textbox" type="text" size="50" />
<label>TextBox 2: </label>
<input id="textbox2" type="text" size="50" />
JQuery
$('#textbox , #textbox2').keyup(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert('You pressed a "enter" key in textbox');
}
event.preventDefault();
}).focus();
DEMO
Some browser prefer keycode and other use which ... I suggest you to use both..
You do not need to focus on two buttons at the same time. Try doing something like this:
$("#button1").keypress(function(event){
if ( event.which == 13 ){
//Do something}
$("#button2").keypress(function(event){
if( event.which == 13 ){
//Do something else}
The problem i think is with your event.preventDefault() function which stops the propogation of the event once a function is executed. In your case, your first function might be getting completed before the second one and hence the second one gets aborted in the middle.
$("#first-button-id , #second-button-id ").keyup(function(event){
if ( event.which == 13 ) {
alert("you pressed enter.");
event.preventDefault();
}
}
The reason the first submit button is always firing is because that's the default behavior of a web page which you haven't actually altered with your code.
Try this:
$(function () {
$("#first-button-id, #second-button-id").keyup(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
if (e.keyCode == '13') {
$(this).trigger("click");
}
});
});
What you seem to be asking about strikes me as rather odd. It looks like you want second-button to be 'clicked' if the focus is on second-button and enter is pressed. Tabbing until the focus is on the correct button is really the only practical way this could happen.
Try this.
$('#first-button-id').on("keydown", function (e)
{
if (e.keyCode == 13)
{
e.preventDefault();
$("first-button-id").click();
}
});

jQuery disabling submit-by-press on keyboard

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();
}
});

"Enter" Keypress to Submit the Form is not working in IE 9/10

$(function(){
$('.inviteClass').keypress(function() {
if(event.keyCode=='13') {
doPost();
}
});
Here I have one small requirement. Pressing keyboard Enter to submit the form and it is working fine in FireFox and Chrome, as well as IE 7 and 8, but it is not working in IE9 and IE 10.
Please help me.
Points to note:
You are missing a closing bracket.
Also, change the selector to window
Use .on() function
Use the .which property of event. See jQuery documentation
The keycode is an integer - remove the quotes
Add a return false; to stop the event from bubbling to the form (and possibly submitting the form twice). See Submitting a form on 'Enter' with jQuery?
Final code:
$(function() {
$(window).on('keydown', function(event) {
if(event.which == 13) {
doPost();
return false;
}
});
});
try
$('.inviteClass').keypress(function (e) {
c = e.which ? e.which : e.keyCode;
if (c == 13) {
doPost();
e.preventDefault();
return false; //<---- Add this line
}
});
you must use jQuery's event.which, also change '13' to 13 (a closing bracket was also missing):
$(function(){
$('.inviteClass').keypress(function(event) {
if(event.which == 13) {
doPost();
}
});
});
Please Try to use keydown event and also pass the event object in the function like this
$(function(){$('.inviteClass').keydown(function(event){if(event.keyCode=='13'){doPost();}});
or
$(function(){$('.inviteClass').keypress(function(event){if(event.keyCode=='13'){doPost();}});
Hope this will help you
Thanks

Categories

Resources