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();
}
}
Related
I'm using the Bootstrap button plugin to render a list of checkboxes as buttons. This works great except for when "clicking" the buttons using the spacebar. The default behavior of the Bootstrap example when pressing space with the focus on one of the checkbox buttons is that the label receives the "active" class but the checkbox element doesn't actually get checked. I added the following javascript to programatically click the label when the spacebar is pressed. If I put an alert in there somewhere, even at the end of the handler, it works as expected. Without an alert the spacebar doesn't toggle the button state OR check the checkbox.
<script>
$(function() {
window.onkeydown = function(event) {
if(event.keyCode === 32 && $(event.target).hasClass('cabin-cb')) {
//alert('hi');
event.preventDefault();
//alert('hi');
$(event.target).closest('label').click();
//alert('hi');
}
};
});
</script>
Trigger the "click" event in something like a timeout handler so that it happens after the "keydown" event has run its course:
setTimeout(function() {
$(event.target).closest('label').click();
}, 1);
You could do it with Promise.resolve() or requestAnimationFrame() too; the point is to have the "click" happen once the keyboard processing has finished.
I would like to realize a keypress event for typing a string into an input elements by Jquery, I know Jquery can listen the event of keypress, keydown and keyup. But, what I want to do is using the Jquery to realize the action of keypress and put the value of which key I pressed into the input elements. Is that possible by jQuery to realize this task?
Is this what you want?
WORKING FIDDLE
$('.input').on('keypress', function(event) {
event.preventDefault();
$(this).val(event.keyCode);
});
$( ".input" ).trigger( "keypress" );
// Target input element and bind to the "keyPress" event.
$('.input').on('keypress', function(event) {
// Prevent the default action to stop the key character being entered into the field
event.preventDefault();
// Add the event's keyCode into the field
$(this).val(event.keyCode);
})
http://codepen.io/anon/pen/XXNOQd?editors=101
I need to detect how a user submitted a form to generate some statistics. They can either press enter when typing on the input or they could click the submit button.
I tried binding a click event to the button and a keyup event to the input but what happens is when I press enter the click event is triggered. I read in some other thread that this is part of the new HTML5 spec or something like that.
I then thought of binding a submit event to the form and detecting there what originated that event, but I've had no luck so far. Is that even possible?
EDIT
I guess I managed to fix it. I changed my keyup event to keypress, like suggested by fortegente, and prevented the defaultEvents from firing while at the same time triggering a submit event on the form. That seemed to do the trick.
You can try add custom attribute. Something like this:
$('form').submit(function(){
alert($(this).attr('event'));
});
$("button").on('click', function() {
$("form").prop("event", "click").submit();
});
$("input").on('keypress', function() {
if (e.which == 13) {
$("form").prop("event", "keypress").submit();
}
});
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!
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.