“Enter”键在文本框处于活动状态时调用javascript函数

"Enter" key calls a javascript function when textbox is active

本文关键字：活动状态 调用 函数 javascript Enter 文本      更新时间：2023-09-26

我有一个文本框和一个按钮

<div class="TextField Large">
    <input type="text" name="q" id="SearchBox" />
</div>
<div style="height: 40px; text-align: right; position: absolute; top: 0px; right: 0px;">
    <input type="button" value="Search" class="Button" onclick="Search()" />
</div>

基本上，您在文本框中输入文本，然后单击"搜索"按钮时，将调用JavaScript函数Search()。

如何添加当用户输入文本并在键盘上按"Enter"时执行搜索的可能性？

首先：添加一个表单（无论JavaScript做什么，都应该有一个服务器端回退）。

第二：将按钮更改为提交按钮。

第三：将 JavaScript 移动到表单的提交事件，而不是按钮的客户端事件。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function Search(){
    alert("search!");
    //search logic
    return false;
}
</script>
</head>
<body>
    <form onsubmit="return Search()">
        <input type="text" name="q" />
        <input type="submit" value="Search" />
    </form>
</body>
</html>

就这样

当您输入在表单中时，输入应自动提交表单，

否则：

$('your form').keyup(function(e) {
  if(e.which == 13) $(this).submit();
});

我建议您将按钮更改为 type="submit"，以便该输入功能自动工作，然后在提交事件处理程序中执行 Search（） 代码

$('your form').submit(function() {
  // your search code
}

$('#textbox').keypress(function(event){
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13'){
      alert('You pressed a "enter" key in textbox');    
   }
});

希望这会对您有所帮助..

相关文章：