html点击确认键搜索

80次阅读
没有评论

要在HTML中实现在点击确认键触发搜索功能的效果,需要使用JavaScript来监听用户的按键事件,然后执行搜索操作。以下是一个实现此功能的示例代码:

<input type="text" id="search-input" onkeydown="search(event)">
<button id="search-btn" onclick="search()">搜索</button>

<script>
function search(event) {
  if (event && event.keyCode !== 13) { // 如果有传入event参数并且按键不是回车键
    return;
  }

  var searchInput = document.getElementById("search-input");
  var searchTerm = searchInput.value;
  
  // 执行搜索操作,例如向服务器发起请求并更新页面内容
  console.log("搜索:" + searchTerm);
}
</script>

在这个示例中,我们首先为文本框和搜索按钮添加了id属性,方便在JavaScript中进行操作。然后,我们给文本框添加了onkeydown事件监听器,并传入event参数,以便在用户按下回车键时触发搜索操作。在事件处理函数中,我们首先检查传入的event参数是否存在并且按键是否是回车键,如果不是则直接返回。否则,我们获取文本框中的搜索词并执行搜索操作,这里只是简单地在控制台中打印搜索词,您可以根据实际需求修改为向服务器发起请求等操作。

最后,我们也给搜索按钮添加了onclick事件监听器,并在其中调用search函数,以便在用户点击搜索按钮时也能执行搜索操作。如果您不需要搜索按钮,可以只保留文本框和onkeydown事件监听器即可。

正文完
 
评论(没有评论)