JavaScript如何实现输入框按Enter键触发标题修改功能

你不需要修改原有block()函数的逻辑，只需要给文本输入框添加键盘按下事件的监听，检测到按下回车键时调用已有的block()函数即可，有两种常用实现方式：

方式1：HTML内联快速绑定（改动最小） #

直接修改id为textBox的输入框标签，添加onkeydown事件判断即可，修改后的输入框代码如下：

<input type="text" id="textBox" onkeydown="if(event.key === 'Enter') block()">

兼容提示：如果需要适配IE8及更老旧的浏览器，可以把判断条件替换为event.keyCode === 13，回车键的keyCode固定为13。

方式2：JS中统一绑定事件（推荐，结构行为分离） #

不把事件写在HTML标签里，在JS代码中添加事件监听，注意要等DOM加载完成后再绑定元素，避免找不到节点报错，修改后的完整JS代码如下：

function block() {
  var myValue = document.getElementById('textBox').value;
  if (myValue.length == 0) {
    alert('Please fill with valid text');
    return;
  }
  var myTitle = document.getElementById('Heading');
  myTitle.innerHTML = myValue;
};

// 新增：DOM加载完成后绑定输入框回车事件
document.addEventListener('DOMContentLoaded', function() {
  const inputBox = document.getElementById('textBox');
  inputBox.addEventListener('keydown', function(e) {
    // 检测到回车键按下，执行修改标题逻辑
    if (e.key === 'Enter') {
      block();
    }
  })
})

这种方式不需要改动原有HTML结构，代码可维护性更好。

补充说明 #

如果后续你把输入框和提交按钮包裹在<form>标签内，不需要额外绑定键盘事件，表单默认就支持输入框按回车触发提交，只需要监听form的submit事件调用block()，同时加e.preventDefault()阻止页面默认跳转刷新即可。

内容的提问来源于stack exchange，提问作者RuntyBeef