On my website I have several input fields in a form. I want the user to be able to submit the form on any of the fields by hitting the enter key. However, this causes an issue because in Internet Explorer and Safari if the user types a few letters and an autocomplete dropdown opens and they use arrow keys and hit enter to do the autocomplete, the form will submit.
How can I change this behavior?
Also note that I have a custom function for "submitting". It is not the default submit.
Here is my jQuery code:
$('.submitButton').click( submitContactForm );
$('.column input, .submitButton').keydown(function( e ){
if( e.keyCode == 13 ){// if 'enter' key
$('.submitButton').click();
}
});
I have decided to use the safeEnter jQuery plugin. Looks like it will solve this problem nicely.
you need add onkeydown event on dropdown of autocomplete and return false in function.
if you need to prevent form from submitting, you should call preventDefault() method on the event object in the event Handler.
element.onkeydown = function(event){
var event = event || window.event;
event.preventDefault();
var code = event.keycode || event.which;
if(code === 13){
// Your enter behavior
}
}
you can prevent event from bubbling up the DOM by calling event.stopPropagation();. if your autocomplete is the somewhere in your form this will help not to fire the event on the form but only on autocomplete.
Related
I'm having some buttons that can be clicked either by mouse or key presses. Then I have a function called by space-key.
The problem is that when one of the buttons has been clicked with mouse, it seems the button gets selected (focussed) and when the space-key (and enter-key) gets pressed afterwards, the browser calls the selected (focussed) button instead of the intended function for the space key.
I've found a solution long time ago so I know there is a solution but can't remember.
Edit: This is not inside a form.
If you don't need the spacebar for your form, you can do an event.preventDefaut() on keypress for the spacebar.
$(yourbuttonelements).keydown(function(e) {
var kc = e.keyCode;
if (kc === 32){
e.preventDefault();
}
});
If you wish to bypass the default event on a keypress, you need to first delegate a 'keypress' or related event and then check for event.which to find the corresponding key pressed and if it matches with what you want to prevent, you can either do return false; or do event.preventDefault();
Example :
$('button').on('keypress',function(e)
{
if(e.which == 32) // 32 -> represents the keycode of space bar
e.preventDefault();
});
preventDefault() didn't work though I found a solution.
As mentioned, the problem was the button got focussed when clicked, so I used blur() for the button.
document.getElementById(id).blur();
I have a search box whch is a text type. it has a click button, which initiates the Find().
how can i do the find by hitting enter inside the textbox
If your text input is inside of a form element, you can attach an onSubmit (or jQuery .submit()) event handler to the form element. This event will fire when the user presses enter while inside the text input
Use ng-keypress on the input element and check for enter key code:
<input type="text" ng-keypress="($event.which === 13) ? Find() : void(0)" />
This is assuming that jQuery has been loaded. Otherwise, you might want to use $event.keyCode, but doing it in a browser compatible way would be tricky.
If you have a directive which contains this template, then you should catch this event in the link function and call Find there. Otherwise, putting the input button inside a form and defining a on-submit on the form element. Do check for IE compatibility though, I remember IE7 at least needs a hidden <input type="submit" /> in the form for the enter key to submit the form.
document.onkeydown = function(evt) {//when key is pressed
evt = evt || window.event;
if (13 == evt.keyCode) {//if key was enter
if (document.activeElement.className== "search_input"){//if the focus is on your input (in this case search_input)
Find() //call your function
return false;//cancel enter
}
}
}
I generally have very good luck with Angular-UI. The ui-keypress directive should serve well in this case. http://angular-ui.github.io/ui-utils/#/keypress. The keycode you want for the Return/Enter key is 13.
In my asp.net solution, I have a text input box and a search button. There is a onkeyup jquery event on the text input field so it automatically clicks the search button when the user presses a key. You can also manually click the button.
But what I noticed is that if you are typing, and then you press ENTER key, it will trigger the on onkeyup event. How can I disable the function from occurring if the ENTER key was pressed, or maybe detect if it was the ENTER key and then have an if statement or something.
Another thing that is happening is, if there is something wrong with the text in the input box, I display an alert message box. Then if you press ENTER to close the box, it will somehow trigger the onkeyup event, which displays the alert box again...
Thanks.
add if (evt.keyCode != 13) in front of all actions in the function :)
You can use .which on the event to determine the KeyCode for the key that was pressed (ENTER = 13):
$('#input').keyup(function(event) {
if(event.which == 13)
{
//respond to enter keypress
}
});
Also you can use this site to easily find info about keyups/downs etc for different keys.
Hope this helps!
Hope this helps.
<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 onkeyup event is triggered after an alert when you close it with ENTER because the alert is close onkeydown, and so after it's closed and the document regains focus, when you release the key, the textbox's onkeyup event will be triggered.
As previously stated, you can add an if (event.keyCode != 13) to test if the ENTER key is not the key that was pressed.
A better solution would be to use a different event.
Instead of onkeyup, use oninput.
The oninput event is triggered when the user changes the textbox's value.
The event will fire only when the user writes something in the textbox or deletes something. It will not go off when the ENTER key is pressed, or when any other key that doesn't change the textbox's value (like arrow keys) is pressed.
The oninput event might be a better choice for the functionality you're searching for.
*if you're using the oninput event you don't need the if mentioned before.
A fiddle for demonstration of the oninput event: Here
For future reference I found this useful site:
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Good luck!
I want to ask a question about the JavaScript event. I have an <input type="text"> box and I have applied the autocomplete function on that box.
I know that when the user types the char like "sta" in the box and the JavaScript will call the keypress event, which also calls the autocomplete function.
However, I want to know what event of the JavaScript will be called what I use the mouse to click/click the keyboard "enter" to the wanted item from the autocomplete list.
The mouse clicking event is called onclick, the enter key event is called an onkeyup event. For the second one, you need to make sure the enter key was pressed, though:
someElement.onkeyup = function( e ){
var e = e || window.event;
if( e.keyCode == 13 ){
// enter was pressed!
}
};
However, I want to know what event of the JavaScript will be called what I use the mouse to click/click the keyboard "enter" to the wanted item from the autocomplete list.
It sounds like you are looking for an event which triggers after text of the text box changes. If that is the case, the event fired is onchange.
That will take care if user select autocomplete option either via mouse or hits the enter button.
In my project, there is a button search which seems to be the default button to trigger when the ENTER key has been pressed.
How can I detect a keydown event with jQuery for a login button?
It's an ASP.NET project.
Bind the "keypress" event handler to an element using jQuery.
See .keyPress() in the jQuery API.
Example code:
$('#login_button_id').keypress(function(event) {
//prevent submission when enter key pressed
if (event.keyCode == '13') {
event.preventDefault();
}
}