如何在输入类型="文本"中按下Enter键后调用JavaScript函数

How to call a JavaScript function after pressing Enter key in Input type="text"?

本文关键字：quot Enter 函数 JavaScript 调用 文本 输入 类型      更新时间：2023-09-26

如何调用函数get()，它将在用户按下Enter键后检索文本框中键入的单词的含义?

我在下面添加我的代码，直到现在都没有工作;请将您的更正添加到代码中，我知道代码太差了。

<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>

必须在事件对象上使用键代码。对于enter，它是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);

那么，您可以将事件绑定到keydown或keypress事件，并测试按下的键。

但这通常不是一个好主意。键事件可能因其他原因而触发，例如用户从键盘IME中选择条目。

你真正想做的是模仿输入键提交表单的行为。因此，通过实际创建一个表单，将输入放入其中，并在表单上拾取submit事件来完成此操作。这样你就可以确保你只按下了用于提交的Enter键，而不必担心其他的Enter键(或shift-Enter或类似的键)，并且任何可以填写表单但没有正常Enter键的设备仍然可以使用该页面。

<form id="lookup-form">
    <input id="lookup-field"/>
</form>
document.getElementById('lookup-form').onsubmit= function() {
    get(document.getElementById('lookup-field').value);
    return false;
};

(如果您有足够的责任心，您可以使它成为一个rel表单，其中action指向执行查找的服务器端脚本，以便该功能适用于没有JavaScript的用户代理)

基本上:

  1. 监听keydown, keyup或keypress事件
  2. 事件对象将包含keycode，测试它是否为回车键
  3. 调用函数

由于浏览器处理事件绑定和键码的方式不同，您几乎可以肯定最好使用库。例如，yui3及其key-event模块:

Y.one('#id_of_my_input').on('key', get, 'press:enter');

假设您正在使用jQuery JavaScript框架，下面的代码应该可以工作:

$('#my_text_box').keypress(function(e) {
    if (e.which == 13) {
        get();
    }
});

13为回车键代码。

理想情况下，代码应该是document.ready设置的一部分

我是这么做的:

$("#inputIDHERE").bind('keypress', function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
        get();
    }
});

我还添加了

在我的输入标签周围，尽管可能不需要。

或者你用这个。我认为这是最好的方法，因为用控制台调试要容易得多。

<input id="lookup-field" onchange="name of the function"/>

您正在寻找jQuery的更改事件

$('#TextBox').change(function(e) {
    doSomethingWithString( this.val() );
})

关于keydown和查找回车键的建议也是有效的。

相关文章：