Having some problem cross browser. I need to Support IE7-9, my site is set to IE7 standards - cannot be changed. Then i need to support latest chrome, safari and firefox.
I want to hit a keyup event in a textbox on enter. Problem is i have a keypress event added to the form on that page which is submitting the form which i dont want to happen.
Sample application would be like this.
JAVASCRIPT:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
//if (!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
//e.preventDefault();
}
});
$("#myInput1").bind("keyup", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});
HTML
<li onkeypress="alert('hi')">
<input id="myInput1" type="text" />
<div id="log1"></div>
<div id="log2"></div>
</li>
If i use e.preventDefault() - keyup event is not hit, if i dont use it, page is posting back.
I want to see "Key up - Enter pressed - input event" to be written to screen on pressing enter, across all browsers.
Any help would be appreciated. Thank you.
Finally was able to do it like this:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (e.keyCode != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
e.stopPropagation();
sampleE = e.keyCode;
$("#myInput1").trigger("keyup");
return false;
});
$("#myInput1").bind("keyup", function (e) {
if (!e.keyCode)
e.keyCode = sampleE;
if (e.keyCode != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});
var sampleE = null;
I know this is not the best of the options but this is working. Thanks All.
Related
I need to create a jQuery script to ignore the execution of the keyup or keypress event listener function and execute it only if I press the Enter key on the keyboard.
$(document).on("keypress", "input", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode != 13) {
console.log('Not enter')
} else {
}
});
Search for event.preventDefault() on the jQuery docs
$(document).on("keypress","input", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode != 13) {
console.log('Not enter')
} else {
e.preventDefault(); // prevent default action if not enter
}
});
I have a form with a textfield inside and I am trying to disable the default behavior when the browser submits the whole form if the user presses Enter while the textfield is selected.
$('#recaptcha_response_field').keydown(function(event) { if (event.keyCode == 13) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
alert("You Press ENTER key");
return false;
}
});
Currently am getting "You Press ENTER key" and the default behavior isn't overridden.
Try this:
$(document).on("keypress", 'form', function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
This will prevent the form submit on keypress
DEMO HERE
I found this and it works for me.
<input type="text" name="somename" id="someid" value="" onkeypress="return event.keyCode!=13">
To prevent the script from blocking the enter key on other elements such as on a textarea. Change the target from "form" to "input".
$(document).on("keypress", "input", function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
If none of the above solution is working for you , and you are using javascript anyway , why don't you use button type as 'button' <input type='button'> and submit it using javascript
$('#form_id').submit();
U can use this script to prevent enter on entire from.
<script type="text/javascript">
$(document).on("keypress", 'form', function (e) {
if (e.target.className.indexOf("allowEnter") == -1) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
}
});
</script>
you put the classname to which control need to use enter
I am facing a problem regarding to the keypress event. When I press the enter key then keypress event is not fired but it is working fine with the other keys.
Here is my code :
$(document).ready(function () {
alert('hi');
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
alert(code);
if (code == 13) { //Enter keycode
//Do something
}
});
});
You should use keyup event for this
$(document).ready(function() {
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keyup(function(e) {
if (e.which == 13) {
//Enter keycode //Do something
}
});
});
Use just e.which as its normalized across keys:
$(document).ready(function () {
alert('hi');
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keypress(function (e) {
var code = e.which;
alert(code);
if (code === 13) { //Enter keycode
e.preventDefault();
//your code goes here
}
});
});
Note: in my case I bind do .keydown
i try to capture this key : alt+arrow down, alt+arrow up.
First, i capture alt key down :
var isAlt = false;
$(document).keydown(function (e) {
if(e.which == 18){isAlt=true;}
}).keyup(function (e) {
if(e.which == 18){isAlt=false;}
});
this code is ok, and alt keyup is detected.
But, if i add arrow key down, when arrow keydown, it's ok, but after alt keyup is not detected :
var isAlt = false;
$(document).keydown(function (e) {
if(e.which == 18){isAlt=true;}else{
if(e.which == 38 && isAlt == true) {
//action code here work
console.log('action ok');
}
}
}).keyup(function (e) {
if(e.which == 18){isAlt=false;}
});
You can try this on console, and after log 'action ok', you need press again alt key for "isAlt = false".
But, this code work fine on Chrome.
Anyone have one idea for correct this bug ?
You need to check the event.altKey property: https://developer.mozilla.org/en/DOM/KeyboardEvent
I need to change default actions of two events.
When I press "enter" one action occurs, when I press "shift-enter" another. I need to switch it. I means if I press "enter" than "shift-enter" action occurs. I tried something like this but if doesn't work.
f(evt.keyCode == 13) {
if(!evt.shiftKey){
evt.preventDefault();
evt.shiftKey = true;
var e = jQuery.Event("keydown");
e.which = 13;
e.shiftKey = true;
$(wym._doc).trigger(e);
Is there any way to do it?
Here try this :
$(function() {
$('#myinput').keypress(function(e) {
if(e.shiftKey && e.which == 13) {
alert('shift enter');
} else if(e.which == 13) {
alert('enter');
}
});
});