使用 JavaScript 在文本框中的 Enter 键上触发按钮单击

我有一个文本输入和一个按钮(见下文)。当在文本框中按下Enter键时,如何使用 JavaScript 触发按钮的 click 事件

当前页面上已经有一个不同的 “提交” 按钮,因此我不能简单地将该按钮设为 “提交” 按钮。而且,如果从一个文本框中按下该按钮,我希望按Enter键即可单击该特定按钮,没有别的。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

答案

在 jQuery 中,以下将起作用:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

或在纯 JavaScript 中,以下方法将起作用:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

然后将其编码!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

想通了:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

将按钮设为 Submit 元素,因此它将是自动的。

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

请注意,您需要一个包含输入字段的<form>元素才能完成此工作(感谢 Sergey Ilinsky)。

重新定义标准行为不是一个好习惯, Enter键应始终调用表单上的 Submit 按钮。

由于还没有人使用过addEventListener ,因此这是我的版本。给定元素:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

我将使用以下内容:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

这使您可以在保持 HTML 干净的同时分别更改事件类型和操作。

请注意 ,确保这在<form>之外可能是值得的,因为当我将这些元素封装在其中时,按 Enter 提交了表单并重新加载了页面。让我眨了眨眼才发现。

附录 :感谢 @ruffin 的评论,我添加了缺少的事件处理程序和preventDefault以允许此代码(大概)也可以在表单内工作。 (我将对此进行测试,这时将删除括号中的内容。)

在纯 JavaScript 中,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

我注意到答复仅在 jQuery 中给出,因此我想也以普通 JavaScript 给出一些内容。

您可以使用的一个基本技巧,但我尚未完全提及。如果要执行 ajax 动作或 Enter 上的其他工作,但又不想实际提交表单,可以执行以下操作:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

设置 action =“javascript:void(0);” 像这样,这是从本质上防止默认行为的捷径。在这种情况下,无论您是按 Enter 还是单击按钮,都会调用一个方法,并进行 ajax 调用以加载一些数据。

尝试一下:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

要在每次按下回车键时触发搜索,请使用以下命令:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

这只是我从一个最近的项目中得到的东西…… 我在网上找到了它,我不知道普通的旧 JavaScript 是否有更好的方法。