jQuery 带有回车键功能的jQuery按钮提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17606361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery button submit with enter key function
提问by HiDayurie Dave
I have a button submit like this :
我有一个按钮提交是这样的：
<input type="button" id="button_sign_in" class="button_sign_in" value="Sign in"/>
and I have jQuery submit like this :
我有 jQuery 提交是这样的：
$(document).ready(function()
{
$('#button_sign_in').click(function(){
console.log('login');
$.ajax
({
url: "login",
type: "post",
data: $('#login_form').serialize(),
dataType:'json',
success: function (data)
{
if (data.status=='SUCCESS')
{
window.location='home.php';
}
else
{
$('#button_sign_in').shake(4,6,700,'#CC2222');
$('#username').focus();
}
},
error: function (e) {
console.log('error:'+e);
}
});
});
});
The problem is : we can't submit using enter key, so user must click the button Sign in to submit.
问题是：我们无法使用回车键提交，因此用户必须单击登录按钮才能提交。
What I want ? set enter key into JS function, so user can choose submit using enter key or click the button Sign in.
我想要的是 ？在JS函数中设置回车键，用户可以选择使用回车键提交或点击按钮登录。
Thanks for any help.
谢谢你的帮助。
回答by yeyene
Check this demo http://jsfiddle.net/yeyene/hd7zqafg/
检查这个演示http://jsfiddle.net/yeyene/hd7zqafg/
First click on the result frame (because there are another frames), and press enter, the submit button click event will fire on Enter key press & on button click.
首先单击结果帧（因为还有其他帧），然后按 Enter，提交按钮单击事件将在 Enter 键按下和按钮单击时触发。
$(document).ready(function()
{
// enter keyd
$(document).bind('keypress', function(e) {
if(e.keyCode==13){
$('#button_sign_in').trigger('click');
}
});
$('#button_sign_in').click(function(){
alert('You click submit!');
console.log('login');
$.ajax
({
url: "login",
type: "post",
data: $('#login_form').serialize(),
dataType:'json',
success: function (data)
{
if (data.status=='SUCCESS')
{
window.location='home.php';
}
else
{
$('#button_sign_in').shake(4,6,700,'#CC2222');
$('#username').focus();
}
},
error: function (e) {
console.log('error:'+e);
}
});
});
});
回答by Nick C.
Extract the call to $.ajaxto a new function called something like submitForm.
提取对$.ajax新函数的调用，类似于submitForm.
Then bind that function to all the elements that can cause a submission:
然后将该函数绑定到所有可能导致提交的元素：
function submitForm() {
$.ajax... etc.
}
$('#button_sign_in').on('click', submitForm);
$('#your_input_textbox').on('keypress', function(e) {
if (e.keyCode === 13) {
submitForm();
}
});
回答by hzoo
wrap the inputin a form. If you press enter in the text box it will submit the form.
将 包裹input在一个表格中。如果您在文本框中按 Enter 键，它将提交表单。
HTML
HTML
<form>
<input type="text"/>
<input type="submit" id="button_sign_in" class="button_sign_in" value="Sign in"/>
</form>
change the inputtype to "submit"and call .submit()instead of .click()on the form.
将input类型更改为"submit"并调用.submit()而不是.click()在form.
JS
JS
$('form').submit(function(){
console.log('login');
});
回答by jsonx
Change your input type as submit and prevent default of your submit button. Also your submit button should be wrapped by a form.
将您的输入类型更改为提交并防止提交按钮的默认设置。此外，您的提交按钮应由表单包裹。
$("form").on("submit", function() { return false; });
$("form").on("submit", function() { return false; });
回答by Aldi Unanto
If you only use jQuery.Ajax, certainly not be able to submission when you press enter.
You have to add <form></form>tag to realize it, and change the JS.
如果您只使用jQuery.Ajax，当你按下肯定无法提交进入。您必须添加<form></form>标签才能实现它，并更改JS。
$('form').submit(function(){ //do ajax here })
回答by Brett Caswell
You need to attach an event to the proper element (probably an input), which I assume is a 'username' (textbox) input or (more likely) the 'password' (password) input.
您需要将事件附加到正确的元素（可能是输入），我假设它是“用户名”（文本框）输入或（更有可能）“密码”（密码）输入。
jsFiddle: http://jsfiddle.net/tyxPu/
jsFiddle：http: //jsfiddle.net/tyxPu/
jQuery Section
jQuery 部分
$(document).ready(function () {
var xhrJSON;
$('#button_sign_in').click(function () {
console.log('login');
xhrJSON = $.ajax({
url: "about:blank",
type: "post",
data: $('#login_form').serialize(),
dataType: 'json',
success: function (data) {
if (data.status == 'SUCCESS') {
window.location = 'home.php';
} else {
/*$('#button_sign_in').shake(4, 6, 700, '#CC2222');*/
$('#username').focus();
$("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>")
}
},
error: function (e) {
console.log('error:' + e);
$("#debugger").append("<p>Error - Button Click - Failed to 'Sign In'</p>")
}
});
});
$("#username").keypress(function (event) {
if (event.which == 13) {
xhrJSON = $.ajax({
url: "about:blank",
type: "post",
data: $('#login_form').serialize(),
dataType: 'json',
success: function (data) {
if (data.status == 'SUCCESS') {
window.location = 'home.php';
} else {
/*$('#button_sign_in').shake(4, 6, 700, '#CC2222');*/
$('#username').focus();
$("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>");
}
},
error: function (e) {
$("#debugger").append("<p>Error - Keypress - Failed to 'Sign In'</p>");
}
});
}
});
});
HTML Section
HTML 部分
<form id="login_form">
<input type="textbox" id="username" placeholder="User Name" />
<input type="button" id="button_sign_in" value="Sign In" />
</form>
<div id="debugger"></div>
回答by Rana Bhopale
// Get the input field
var input = document.getElementById("myInput");
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
// Cancel the default action, if needed
event.preventDefault();
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Trigger the button element with a click
document.getElementById("myBtn").click();
}
});
