在文本框中使用JavaScript通过回车键触发按钮点击

技术背景

在网页开发中，常常会有这样的需求：当用户在文本框中输入内容后按下回车键，希望能触发一个按钮的点击事件，以执行相应的操作，如搜索、提交表单等。以下介绍多种实现该功能的方法。

实现步骤

jQuery实现

// 监听文本框的keyup事件
$("#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.");
});

HTML部分：

<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.");
}

HTML部分：

<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) {
    // 兼容处理事件对象
    e = e || window.event;
    if (e.keyCode == 13) {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

将按钮设为提交元素

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

注意：需要一个<form>元素包含输入字段才能使此方法生效。

使用addEventListener的另一种方式

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

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

HTML部分：

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

现代JS使用keypress和event.key === "Enter"

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

阻止表单默认提交行为

<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>

YUI库实现

Y.on('keydown', function() {
    if(event.keyCode == 13) {
        Y.one("#id_of_button").simulate("click");
    }
}, '#id_of_textbox');

Angular2实现

<input (keyup.enter)="doSomething()" />

使用change事件

document.getElementById("txtSearch").addEventListener('change',
    () => document.getElementById("btnSearch").click()
);

可复用的原生JS解决方案

<input type="text" id="message" onkeypress="enterKeyHandler(event,'sendmessage')" />
<input type="button" id="sendmessage" value="Send"/>

<script>
function enterKeyHandler(e, button) {
    e = e || window.event;
    if (e.key == 'Enter') {
        document.getElementById(button).click();
    }
}
</script>

最佳实践

• 兼容性：在使用keyCode时，要注意不同浏览器的兼容性问题，尽量使用现代的event.key === "Enter"来判断回车键。
• 代码复用：将回车键触发按钮点击的逻辑封装成函数，方便在多个地方复用。
• 避免默认行为：在处理回车键事件时，使用event.preventDefault()阻止默认行为，防止不必要的表单提交。

常见问题

• 表单提交问题：如果在表单中使用回车键触发按钮点击，可能会导致表单默认提交。可以通过设置表单的action="javascript:void(0);"或在事件处理函数中调用event.preventDefault()来解决。
• 浏览器兼容性问题：不同浏览器对keyCode和event.key的支持可能不同，要进行充分的测试。例如，旧版本的IE浏览器可能需要特殊处理。