HTML表单输入框如何将安卓手机软键盘Next按钮改为Go/提交按钮

安卓软键盘的Enter键显示文本由系统对输入框上下文的检测结果决定，你可以通过以下两种无侵入的方式修改，不会影响原有Enter键的keydown监听逻辑： #

方案1：使用H5标准enterkeyhint属性（兼容性覆盖安卓9及以上系统） #

这个属性是专门用来告知浏览器/系统软键盘要展示的Enter键类型，直接给Input #1添加属性即可：

<form>
  <input placeholder="Input #1" tabindex="-1" enterkeyhint="go"></input>
  <input placeholder="Input #2" tabindex="-1"></input>
</form>

可选的属性值对应软键盘文本：

• go：显示「前往/Go」
• search：显示「搜索」
• send：显示「发送」
• done：显示「完成」

方案2：兼容低版本安卓的实现方案 #

低版本安卓不支持enterkeyhint，你可以利用「软键盘检测到当前表单没有下一个可聚焦输入元素时就会显示Go/完成按钮」的规则，通过JS临时修改第二个输入框的可聚焦状态实现：

const input1 = document.querySelector('input[placeholder="Input #1"]')
const input2 = document.querySelector('input[placeholder="Input #2"]')
input1.addEventListener('focus', () => {
  input2.setAttribute('disabled', 'disabled')
})
input1.addEventListener('blur', () => {
  input2.removeAttribute('disabled')
})

如果你的业务逻辑不允许禁用第二个输入框，也可以在Input #1聚焦时临时把第二个输入框的tabindex改为-999，失焦后恢复原值即可。 #

注意：两种方案都不会拦截原有keydown事件的触发，你绑定的Enter键监听逻辑可以正常运行。

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