How do I trap enter from form except textarea - javascript

In a dynamic form, I have the following code to trap 'enter' key.
$(document).bind('keypress', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
Occasionally, there is an element like HTMLTextAreaElement which accept 'enter' key.
how do I unbind preventDefault only for HTMLTextAreaElement.
TIA.

Try this:
if (e.which == 13 && e.target.localName !== 'textarea') {

$("html *:not(textarea)").bind('keypress', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
Demo: http://jsfiddle.net/DerekL/4JWLb/

Related

Allow only enter keypress

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 can't capture enter key in select2

I am using select2, and I need to capture the enter key, but I can't.
I used:
$(document).on('keydown', '.select2-input', function (ev) {
if (ev.which == 13) {
alert('press enter')
}
if (ev.which == 9) {
ev.preventDefault();
ev.stopImmediatePropagation();
alert('press tab')
}
});
I can capture all the keys but for the enter.
Can someone help me?
Try this, it's essentially the same thing:
$(document).on('keyup keypress keydown', ".select2-input", function (e) {
if (e.which == 13) {
console.log("Pressed enter!");
}
});
#Anon's code works!
I'm using Select2 4.0.3 and I just remove keypress and keydown events:
$(document).on('keyup', '.select2-search__field', function (e) {
if (e.which === 13) {
alert('Pressed enter!');
}
});
Try this out:
$('select2-search-field > input.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
alert('enter key event');
});

Jquery key press event not triggered on enter

$("#username,#password").keypress(function(e)
{
//alert('');
if(e.keyCode == 13)
{
signIn();
}
});
The keypress event not calling if the enter button is pressed.
Try using keyUp event.
Live Demo
$("#username,#password").keyup(function(e){
//alert('');
if(e.keyCode == 13)
{
signIn();
}
});
This is also working with keypress
Live Demo
$("#txt1").keypress(function(e) {
if (e.keyCode == 13) {
//signIn();
alert("keypress");
}
});​
Key down is more appropriate:
$("#username,#password").keydown(function(e){
if(e.keyCode == 13)
{
signIn();
}
});
Use e.which instead of e.keyCode because this is what jQuery guarantees to be on event
Try e.preventDefault(), because without it (if they are in a form) the form submits
Maybe the best would be listening on form's submit event
Are you sure it's not the signIn (); function that's faulty? Because this seems to work just fine; http://jsfiddle.net/vDkBs/1/
Use keypress and which statement:
$("#username,#password").keypress(function(e) {
if (e.which == 13) {
//call here your function
}
});

keypress event is not fired when we press enter key

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

Detect the Enter key in a text input field

I'm trying to do a function if enter is pressed while on specific input.
What I'm I doing wrong?
$(document).keyup(function (e) {
if ($(".input1").is(":focus") && (e.keyCode == 13)) {
// Do something
}
});
Is there a better way of doing this which would say, if enter pressed on .input1 do function?
$(".input1").on('keyup', function (e) {
if (e.key === 'Enter' || e.keyCode === 13) {
// Do something
}
});
// e.key is the modern way of detecting keys
// e.keyCode is deprecated (left here for for legacy browsers support)
// keyup is not compatible with Jquery select(), Keydown is.
event.key === "Enter"
More recent and much cleaner: use event.key. No more arbitrary number codes!
NOTE: The old properties (.keyCode and .which) are Deprecated.
const node = document.getElementsByClassName("input1")[0];
node.addEventListener("keyup", function(event) {
if (event.key === "Enter") {
// Do work
}
});
Modern style, with lambda and destructuring
node.addEventListener("keyup", ({key}) => {
if (key === "Enter") {
// Do work
}
})
If you must use jQuery:
$(document).keyup(function(event) {
if ($(".input1").is(":focus") && event.key == "Enter") {
// Do work
}
});
Mozilla Docs
Supported Browsers
$(document).keyup(function (e) {
if ($(".input1:focus") && (e.keyCode === 13)) {
alert('ya!')
}
});
Or just bind to the input itself
$('.input1').keyup(function (e) {
if (e.keyCode === 13) {
alert('ya!')
}
});
To figure out which keyCode you need, use the website http://keycode.info
Try this to detect the Enter key pressed in a textbox.
$(function(){
$(".input1").keyup(function (e) {
if (e.which == 13) {
// Enter key pressed
}
});
});
The best way I found is using keydown ( the keyup doesn't work well for me).
Note: I also disabled the form submit because usually when you like to do some actions when pressing Enter Key the only think you do not like is to submit the form :)
$('input').keydown( function( event ) {
if ( event.which === 13 ) {
// Do something
// Disable sending the related form
event.preventDefault();
return false;
}
});
It may be too late to answer this question. But the following code simply prevents the enter key. Just copy and paste should work.
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
The solution that work for me is the following
$("#element").addEventListener("keyup", function(event) {
if (event.key === "Enter") {
// do something
}
});
Try this to detect the Enter key pressed in a textbox.
$(document).on("keypress", "input", function(e){
if(e.which == 13){
alert("Enter key pressed");
}
});
DEMO
A solution that worked for me is this:
<input onkeydown="if (event.key == 'Enter'){//do logic}else{}">
$(document).ready(function () {
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
// Do something
}
});
});
This code handled every input for me in the whole site. It checks for the ENTER KEY inside an INPUT field and doesn't stop on TEXTAREA or other places.
$(document).on("keydown", "input", function(e){
if(e.which == 13){
event.preventDefault();
return false;
}
});
Here is what I did for my angular project:
HTML:
<input
class="form-control"
[(ngModel)]="searchFirstName"
(keyup)="keyUpEnter($event)"
/>
TypeScript:
keyUpEnter(event: KeyboardEvent) {
if (event.key == 'Enter') {
console.log(event);
}
}

Categories