在文本输入中按 Enter 键时触发<按钮>

Trigger <button> when pressing the Enter key in text input

本文关键字：按钮 输入 文本 Enter      更新时间：2023-09-26

>我正在制作一个搜索栏，将文本栏作为标签，将搜索按钮作为标签，我使用a而不是的原因是因为我在按钮上使用放大镜的图片，当我使用它时，它不想正确定位。

这是我的 HTML：

<form id="search-form" href="#test1" class="smoothscroll">
            <input type="text" id="searchText" onClick="this.select();" placeholder="Search..."/>
            <button type="button" id="searchButton">
                <img src="magnify.png" id="magnify"/>
            </button>
        </form>

这是jquery： 

$(document).ready(function () {
    $("#searchButton").click(function () {
        var text = document.getElementById('searchText').value;
        $("html, body").animate({
            scrollTop: ($('#' + text).offset().top)
        }, 2000);
    });
    $("#searchText").keyup(function (event) {
        if (event.keyCode == 13) {
            $("#searchButton").click();
        }
    });
});

谢谢你的帮助。

根据文档，您应该使用 .which 而不是 keyCode：

$("#searchText").keyup(function(event){
    if(event.which == 13){
        $("#searchButton").click();
    }
    // Make sure the form isn't submitted
    event.preventDefault();
});

若要确定按下了哪个键，请检查 传递给处理程序函数。虽然浏览器使用不同的 属性来存储此信息，jQuery 规范化 .其中 属性，以便您可以可靠地使用它来检索密钥代码。

试试这个

$("#searchText").keyup(function (event) {
    var code= event.keyCode ? event.keyCode : event.which;
    // or use simply, var code= event.keyCode || event.which;
    if (code == 13) {
        $("#searchButton").click();
    }
});

演示

$("#searchText").keyup(function(event){
  if (event.which === 13) {
    $("#searchButton").trigger("click");
   }  
});

另请参阅 Javascript .keyCode vs. .which？

相关文章：