Problem Statement: I have implemented code described in this Stack Overflow answer to try and capture a press of the answer key while a user is in a text <input>. The code works to capture the enter press, however, after enter is pressed, the function body keeps running. Essentially, as soon as the enter key is pressed, the function runs infinitely. The ideal behavior of this is to have a user press Enter and then have the function called once.
What have I tried to solve my Problem?
The following was my original jQuery.
$(function(){
$("#maininput").keyup(function (e) {
if (e.keyCode == 13) {
alert("Enter was Pressed while in input ")
}
});
});
This ran infinitely after the Enter key was pressed. As a result of this, I started looking for more Stack Overflow entries, and I found threads like this that talk about using return false or e.preventDefault(). I tried implementing return false and had the following code:
$(function(){
$("#maininput").keyup(function (e) {
if (e.keyCode == 13) {
alert("")
}
return false;
});
});
However, even the return false didn't fix it. I then replaced return false with e.preventDefault() and that didn't work. A JSFiddle can be found here.
What is going wrong with my code and how can I fix it?
Nothing in the code you posted will cause the keyup function to run repeatedly, but perhaps you need to debounce your function.
https://css-tricks.com/the-difference-between-throttling-and-debouncing/
http://benalman.com/projects/jquery-throttle-debounce-plugin/
Also, you were on the right track with return false and e.preventDefault(). Here is a great explanation of the difference between the two:
https://css-tricks.com/return-false-and-prevent-default/
Related
I used the instructions here to turn ` into a shortcut thusly:
function reset_shortcut_key(e) {
if (e.keyCode == 192) reset_data();
}
document.addEventListener('keyup', reset_shortcut_key, false);
It loads the next problem successfully, but when I hit this hotkey while focused on a <form> <input> </form> environment, the ` character momentarily shows up (before the next problem is loaded).
I want to prevent it from showing the ` character.
Question: How do I prevent the hotkey ` from being added to a form input?
Other related questions are How can I prevent \ from being added from the form input? (but this is about stripping slashes) and Javascript -> Hotkeys -> Disable for input fields (and here) (but I want the hotkey to work).
Edit: Judging from the current comment and answer, the appropriate function is event.preventDefault(). I'm still not clear on how to actually implement this.
Simply adding it before or after document.addEventListener('keyup', reset_shortcut_key, false); doesn't do anything. Beyond this,
document.addEventListener("keyup", function(event) {
event.preventDefault();
reset_shortcut_key();
}, false);
and
document.querySelector("#input-guess").addEventListener("keyup", function(event) {
event.preventDefault();
reset_shortcut_key();
}, false);
(where id="input-guess" is the name of my <input>) both prevent reset_shortcut_key() from being called. Modifying reset_shortcut_key as follows doesn't change anything:
function reset_shortcut_key(e) {
e.preventDefault();
if(e.keyCode == 192) reset_data();
}
At this point, I'm just making guesses on what to do.
Have you tried this?
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
event.preventDefault();
It turns out that there was a second issue: I needed to use keydown (instead of keyup). After making that change, the following code (utilizing preventDefault()) works:
function reset_shortcut_key(e) {
if(e.keyCode == 192) {
e.preventDefault();
reset_data();
}
}
I want to detect the ENTER keypress of the Address Bar and also, the "Go(to the specified URL)" button using Javascript.
As per my previous efforts using "keycode==13" did not work as required.
say, in the following code:
window.onkeypress = testKeyEvent;
function testKeyEvent(e) {
if (e.keyCode == 13) //We are using Enter key press event for test purpose.
{
alert('Enter key pressed');
}
else //If any other button pressed.
{
alert('Not Enter key pressed');
}
} </script>
I want first the Alert box to be displayed,after I have typed any URL(valid or not) in the address box and Pressed ENTER/ Clicked GO button and then go to specified URL.
Is it Possible? I know I am missing out on a lot of things, Please mention about them.
If I am interpreting your question correctly, I don't think you can do this, because the context in which the JavaScript runs stops at the Document (meaning, JavaScript doesn't even quite know that the browser itself exists).
You can't detect the keystroke because it's outside your window, but you can detect navigation away from your page like
window.onbeforeunload = function () {
alert("Leaving page...");
}
I have been struggling with this for a couple of days. I am pretty sure it's something simple, but I just can't see it.
On this page there is a form that users can use to send a message. Click on the grey Contact icon to see it.
The form used to work fine, but now I cannot type into any fields. Selecting an autocomplete value works though.
I have tried disabling some Javascript, adding a z-index value to the fields, but to no avail.
Can someone please take a look and tell me what might be the problem?
Thanks in advance.
You are too eager to restrict the user..
This code is the problem:
$(document).keydown(function(e){
if (e.keyCode == 39) {
//(...)
toggleArrows();
}
return false;
});
If the button IS NOT keyCode 39, you deny the button functionality.
Just remove the return false and your problem will be gone.
Edit: I just noticed you have 2 keydown events, one checking for keycode 37 and one for 39. Don't do that! You should do it this way:
$(document).keydown(function(e){
if (e.keyCode == 39) {
//(...)
}
else if (e.keyCode == 37) {
//(...)
}
});
And, again, get rid of the return false;.
JSFiddle to show the result: http://jsfiddle.net/xr2stb0k/
First checkbox is restricted with return false (except for the letter "a"), second one isn't.
I'm currently working on code that builds a div box when the user clicks on the .pTile div that does not have the .join class. The click function works, however, for accessibility reasons, I need to have the enter key also build the div when the user uses the enter key. There are multiple .pTile's on the page and more or less can be added at any time through a database. I can't seem to get the enter key function to work. Assistance would be much appreciated.
The following is the working click function the code in it is omitted as it's pretty long:
$(document).on('click', '.pTile:not(.join)', function (e) {
//Do stuff
});
This is the code that I am not able to get to work:
$('.pTile:not(.join)').bind('keypress', function (e) {
if (e.keyCode || e.which) {
$('.pTile:not(.join)').click();
return false; }
});
EDIT: I'd also like to note that the key press function does not get fired at all.
Here is a JSBin with a solution: http://jsbin.com/yelomunafo/1/
Basically you add keypress to the $(document).on('click') part.
I'm having an issue with one of my main templates in umbraco.
The issue is that, whenever I'm logged in on my website and I hit the 'enter' key whilst focus is on an input label, I'm logged out and redirected to my startpage.
I know that the event.preventDefault() method will stop this, but I cannot figure out how to apply it in my scenario.
Is it possible to add a script to my Umbraco template that adds the "preventDefault()" in case of keyCode == 13 (the enter key)? And if so, how exactly?
I have a bunch of labels in all kinds of macros that uses this template, and I would very much prefer not to add these lines manually for each of them!
I have tried quite a lot of variation of the following, but without any luck:
$("input").click(function(e)
{
if(e.keyCode == 13) {
preventDefault();
}
});
Thank you for your time.
You check the keyCode on a click, that won't work. Also, the preventDefault() should be used on the event: e.preventDefault().
Use this instead for global enter key:
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});