This question already has answers here:
Prevent users from submitting a form by hitting Enter
(36 answers)
Closed 6 years ago.
I am trying to prevent the enter key from being put into a textarea, but it doesn't seem to work.
$('#comment').keyup(function(event) {
if (event.text.charCodeAt() == '10') {
event.preventDefault();
}
});
I have written little demonstration on jsfiddle.net, where you can try this code
Everybody has right answer :)
$('#comment').keypress(function (event) {
if (event.keyCode === 10 || event.keyCode === 13) {
event.preventDefault();
}
});
You can't cancel a keyup event. You can cancel keydown and keypress events though. In the documentation, notice that under "Event Information", "Cancels" is "No" for keyup:
keyup
keydown
keypress
Using keydown allows you to cancel far more keys than keypress, but if you don't want to cancel until after the key has been lifted, keypress is what you want. Fortunately for you, the enter key is one of the cancellable keys for the keypress event.
Use event.keyCode in the keydown event:
$('#comment').keydown(function(event) {
if(event.keyCode == 13) return false;
//carry on...
});
$('#comment').keypress(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
While the answers provided here will prevent someone from typing a carriage return, it will not prevent someone from pasting one in.
You would need to do some post processing of the text (in javascript or server-side) to remove them.
http://jsfiddle.net/we8Gm/
But the question is, why? Why not simply use <input type="text"></input> which takes care of this automatically as it is a single-line input element?
Try with .keypress and use return false;
Good luck!
Related
This question already has answers here:
Capture "done" button click in iPhone's virtual keyboard with JavaScript
(8 answers)
Closed 6 years ago.
I have a Cordova app running on iOS. I've implemented a search box with this html:
<form>
<input type="search" class="historySearchTextbox" id="myFilter" placeholder="Search" spellcheck="false" autocorrect="off">
</form>
This works fine and gives me a 'Go' button instead of return on the popup keyboard. I can capture taps on the Go button with this javascript:
$('#myFilter').on('keyup', function (e) {
var theEvent = e || window.event,
keyPressed = theEvent.keyCode || theEvent.which;
if (keyPressed === 13) {
filter();
document.activeElement.blur();
}
return true;
});
But I still have the 'done' button to deal with on the keyboard. I believe there is no keycode that I can use, and my own testing agrees. Based on reading answers on stack overflow, the best I can do is detect when the keyboard goes away. I'm using this javascript:
$("#myFilter").bind('blur', function (event) {
window.alert("blur");
});
This works but I'd rather have a direct way of detecting a 'done' key tap.
Any suggestions?
Thanks!
Jon
The done key is the same as the enter key. So you can listen to a keypress event. I'm writing this using jQuery and i use it in coffee script so I'm trying to convert it back to js in my head. Sorry if there is an error.
$('someElem').bind("keypress", function(e){
// enter key code is 13
if(e.which === 13){
console.log("user pressed done");
}
})
I have a file with multiple inputs. I have a Javascript function which writes information about the input and I do not want it triggered when the user is pressing backspace.
EDIT: Question: Why does this code not work in terms of preventing backspace execution? Instead the entire function does not work:
function hide_words(z,x)
{
if(event.key == 8)
{
event.preventDefault();
}
document.getElementById(z).innerHTML = x;
}
The above just stops the functioning from executing all together.
Update this to:
function inputOn(event)
{
if(event.keyCode == 8)
{
event.preventDefault();
}
}
document.getElementById("input").addEventListener("keydown", inputOn, false);
<input id="input" style="width: 400px;" value="try to delete any text using backspace." />
preventDefault will cancel out the normal action. So the backspace won't do a thing. A keyDown is cancelable, so this works. Please note that the input of other keys is still possible.
You might also want to catch keyCode 46 which is the delete button.
I would like to trigger a click if enter is pressed inside an input tag, but would like to have the default event strategy in all other cases. I have tried it this way:
$("#keywords").keypress(function(e) {
if (e.charCode === 13) {
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
It works, but I am still not satisfied, because when I click inside the input somewhere in the middle of text or press the left button, or home button and then try to type some text, it will show it at the end of the input, which is bad user-experience. Can I keep the input to work in the default way except the case when enter is pressed?
I think what you are looking for is this:
$(document).ready(function () {
$("#test").keyup(function (event) {
if (event.keyCode == 13) {
$("#campus-search").click();
}
});
$("#campus-search").click(function () {
console.log("BUTTON IS CLICKED");
});
});
The input will act completely normal and everything works on default, unless when you press the enter button (keyCode = 13), then the button .click() event will be triggered.
Working Fiddle: http://jsfiddle.net/Mz2g8/3/
————
# Update: Just one hint for the code in your question, do not use charCode, as it is deprecated.
This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.
(E.g. charCode does not work with FF v29.0.1)
And something different but important to know:
charCode is never set in the keydown and keyup events. In these cases, keyCode is set instead.
Source: https://developer.mozilla.org/en-US/docs/Web/API/event.charCode
This should work
$("#keywords").keypress(function(e) {
if (e.charCode === 13) {
e.preventDefault(); // prevent default action of the event if the event is keypress of enter key
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
I think you can eliminate the else clause entirely to get your desired result.
Look at this jsfiddle.
The keypress function does not capture non-printing keys, such as shift, esc, delete, and enter, so the best way to go about this would be have two event handlers: one for keypress, as you have defined above, and one for keydown that checks for the charCode 13 and then performs the click() event on $(#campus-search) if that keycode is passed (by an enter press).
Demo
This is what you are looking for:
HTML:
<input id="keywords" type="text" value="" />
<input id="campus-search" type="button" value="Campus Search" />
JavaScript / jQuery:
$("#keywords").keypress(function (e) {
if (e.charCode === 13) {
$("#campus-search").click();
} else {
$("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});
$("#campus-search").on("click", function () {
alert("Searching..");
});
Live Demo
This question already has answers here:
Pressing spacebar scrolls page down?
(3 answers)
Closed 9 years ago.
I want to disable the scroll down when i pressed the spacebar. This only happens in firefox.
I already use overflow:hidden and meta tag viewport.
Thanks.
This should do the trick. It states that when the spacebar is pressed on the page/document it doesn't just prevent its default behavior, but reverts back to original state.
return false seems to include preventDefault. Source
Check JQuery API's for more information about keydown events - http://api.jquery.com/keydown/
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
JQuery example
$(document).keydown(function(e) {
if (e.which == 32) {
return false;
}
});
EDIT:
As #amber-de-black stated "the above code will block pressing space key on HTML inputs". To fix this you e.target where exactly you want spacebar blocked. This can prevent the spacebar blocking other elements like HTML inputs.
In this case we specify the spacebar along with the body target. This will prevent inputs being blocked.
window.onkeydown = function(e) {
if (e.keyCode == 32 && e.target == document.body) {
e.preventDefault();
}
};
NOTE: If you're using JQuery use e.which instead of e.keyCode Source.
The event.which property normalizes event.keyCode and event.charCode
JQuery acts as a normalizer for a variety of events. If that comes to a surprise to anyone reading this. I recommend reading their Event Object documentation.
Detect if the spacebar is being pressed. If it is, then prevent its default behaviour.
document.documentElement.addEventListener('keydown', function (e) {
if ( ( e.keycode || e.which ) == 32) {
e.preventDefault();
}
}, false);
Have you tried capturing the keydown event in javascript? If you are using jQuery you can read more about capturing key events here:
http://api.jquery.com/keydown/
If you aren't you can capture and ignore the space bar keypress as described here:
https://stackoverflow.com/a/2343597/1019092
I am new to javascript; thus, it question may seem to be naive. I have a simple jQuery function as
$(document).ready(function(){
$('#txtValue').keyup(function(){
sendValue($(this).val());
});
});
This sends immediately when a letter is typed in
I explored jQuery events, but I was unable to find an event for ENTER. I want to run the function when I typed all letters and pressed ENTER.
Check the keyCode property of the event object. 13 represents the Enter key:
$('#txtValue').keyup(function(e){
if(e.keyCode === 13) {
sendValue($(this).val());
}
});
The keyup event will fire every time a key is released. There is no way to selectively fire the event, but you can choose when to handle it!
Edit
It's actually better to use event.which, to deal with all browsers, as jQuery normalises the event object to help.
There isn't an event for an individual key, you'll need to bind the keypress event and see if the keyCode is the Enter key (13):
$('#txtValue').keypress(function(e) {
if (e.keyCode == 13) {
//do stuff
e.preventDefault();
e.stopPropagation();
//-or-
//return false;
}
});
there's no event for ENTER you have to check every key and then if evt.keycode == 13 you have an ENTER
Hope this helps
You just need to add some logic to your event handler to check to see which key triggered the event:
$(function(){
$('#txtValue').keyup(function(event){
if(event.which == 13){
// enter was pressed
}
});
});