在 Input type="text" 中按 Enter 键后如何调用 JavaScript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7224129/
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
How to call a JavaScript function after pressing Enter key in Input type="text"?
提问by sfewfed
How do I call a function, get(), which will retrieve meaning of a word typed in a text box after the user presses the Enter key?
我如何调用一个函数，get()它会在用户按下 Enter 键后检索在文本框中键入的单词的含义？
I am adding my code below, nothing worked till now; please please add your corrections to the code, I know the code is too poor.
我在下面添加我的代码，到目前为止没有任何效果；请在代码中添加您的更正，我知道代码太差了。
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
function get() {
$('#meaning').hide();
$.post('data.php', { name: form.wordfield.value },
function(output) {
$('#meaning').html(output).fadeIn(1000);
});
}
</script>
</head>
<body>
<div id="container" style="width:100%">
<div id="header">
<ul>
<!-- <li><a href="#">Home</a> </li>-->
</ul>
</div>
<div id="logo" style="width: 10%; float:left; position:fixed; top:0px; z-index:-1;"> <img src="logo.gif"></img></div>
<p>
<div id="searchform">
<form name="form" >
<input type="text" name="wordfield" onKeyup="get();"><input type="button" value="Translate" onClick="get();"> </form>
</div>
<div id="meaningbox">
</div>
<div id="meaning">
</div>
</p>
<div id="ad" style="width: 10%;float:right;"><!-- add section --></div>
<div id="footer">footer div goes here </div>
</div>
</body>
</html>
回答by Will
You have to use the key code on the event object. For enter, it is 13, so you check for 13.
您必须在事件对象上使用关键代码。对于输入，它是 13，因此您检查 13。
<input type="text" id="MyInput" />
document.getElementById("MyInput").addEventListener( "keydown", function( e ) {
var keyCode = e.keyCode || e.which;
if ( keyCode === 13 ) {
// enter pressed
get();
}
}, false);
回答by bobince
Well, you canbind an event to the keydownor keypressevent, and test what key was pressed.
好吧，您可以将事件绑定到keydownorkeypress事件，并测试按下了什么键。
But it's not usually a good idea. A key event may fire for other reasons, such as the user picking an entry from a keyboard IME.
但这通常不是一个好主意。按键事件可能因其他原因而触发，例如用户从键盘 IME 中选择一个条目。
What you are really trying to do is emulate the behaviour of the Enter key submitting a form. So do it by actually creating a form, putting the input in it, and picking up the submitevent on the form. You can then be sure you're only getting Enter presses that were intended as a submission, and not have to worry about other Enter presses (or shift-Enter or anything like that), and any device that can fill in forms but doesn't have a normal Enter button will still be able to use the page.
您真正想做的是模拟 Enter 键提交表单的行为。因此，通过实际创建一个表单，将输入放入其中，然后submit在表单上获取事件来实现。然后，您可以确保您只获得用于提交的 Enter 按键，而不必担心其他 Enter 按键（或 shift-Enter 或类似的东西），以及任何可以填写表格但不能填写的设备t 有一个正常的 Enter 按钮仍然可以使用该页面。
<form id="lookup-form">
<input id="lookup-field"/>
</form>
document.getElementById('lookup-form').onsubmit= function() {
get(document.getElementById('lookup-field').value);
return false;
};
(If you're feeling properly conscientious, you can make it a rel form with an actionpointing at a server-side script that does the lookup, so that the functionality works for user-agents without JavaScript.)
（如果您感觉很认真，您可以将其设为 rel 形式，并action指向执行查找的服务器端脚本，以便该功能适用于没有 JavaScript 的用户代理。）
回答by pork-chop
Here's what worked for me:
这是对我有用的：
$("#inputIDHERE").bind('keypress', function(e) {
if(e.which == 13) {
alert('You pressed enter!');
get();
}
});
I also added <form></form> around my input tag, though that may not be necessary.
我还在输入标签周围添加了 <form></form> ，尽管这可能不是必需的。
回答by Marnick Hartgers
Or you use this. i think this is the best way because debugging with the console is way easier.
或者你用这个。我认为这是最好的方法，因为使用控制台进行调试要容易得多。
<input id="lookup-field" onchange="name of the function"/>
回答by Quentin
Basically:
基本上：
- Listen for a
keydown,keyuporkeypressevent - The event object will include the keycode, test that it is the enter key
- Call the function
- 侦听
keydown,keyup或keypress事件 - 事件对象将包含键码，测试它是否是回车键
- 调用函数
Due to differences in how browsers handle event binding and keycodes, you are almost certainly best off using a library for this. For example, with YUI 3and its key-eventmodule:
由于浏览器处理事件绑定和键码的方式不同，您几乎肯定最好为此使用库。例如，对于YUI 3及其按键事件模块：
Y.one('#id_of_my_input').on('key', get, 'press:enter');
回答by NobRuked
Assuming you're using the jQuery JavaScript framework, the following code should work:
假设您使用的是jQuery JavaScript 框架，以下代码应该可以工作：
$('#my_text_box').keypress(function(e) {
if (e.which == 13) {
get();
}
});
13 is the key code for Enter.
13 是 Enter 的关键代码。
Ideally, the code should be a part of your document.readysetup.
理想情况下，代码应该是您document.ready设置的一部分。
