在表单输入上按 enter 使其失去焦点答案

【问题标题】：Press enter on form input to make it lose focus在表单输入上按 enter 使其失去焦点
【发布时间】：2015-09-27 03:02:43
【问题描述】：

我有一个带有输入框和隐藏提交字段的表单：

<form action="javascript:void(0);">
    <input type="text">
    <input type="submit" style="display:none;">
</form>

我想这样当你点击回车时，输入框就会失去焦点。

我怎样才能做到这一点？

【问题讨论】：

.blur

标签： javascript jquery html css forms

【解决方案1】：

通过以下方式避免在 JS 代码中查找 ID（在 Firefox 和 Chrome 上测试）。通过输入失去焦点提交，可能由表单提交触发。

function myFunction(input) {
    input.value = input.value.toUpperCase();
    return false;
}

<form onsubmit="this.textfield.blur();return false">
  <input type="text" id="textfield" onfocusout="myFunction(this)">
  <input type="submit" style="display:none;" />
</form>

【讨论】：

【解决方案2】：

试试这个。请注意，您需要包含 jquery 文件才能使其正常工作。

<form action="javascript:void(0);">
    <input type="text" id="txtFocus">
    <input type="submit" style="display:none;" id="btnHidden">
</form>
<script>
$("#btnHidden").on('click', function() {
        $('#txtFocus').blur();
});
</script>

【讨论】：

【解决方案3】：

为方便起见，为您的输入提供一个 id，您可以使用纯 javascript 使用这个小函数来完成此操作

<form action="javascript:void(0);">
    <input id="input1" type="text">
    <input type="submit" style="display:none;">
</form>
<script>
document.getElementById('input1').addEventListener('keyup',function(e){
    if (e.which == 13) this.blur();
});
</script>

【讨论】：

.addEventListener('keydown', 更像是一个常规的表单提交