enterkeyhint

我最近才知道表单输入中的enterkeyhint 属性，这对我来说似乎很重要，因为制作 HTML 表单标记是前端开发人员生活中相当一部分工作，并且这个属性几乎可以在每个输入框上使用。

enterkeyhint 属性会更改移动键盘上的操作键，从而更改文本/功能。 Stefan Judis 在 2020 年的这条推文中很好地解释了这一点

https://twitter.com/stefanjudis/status/1249958064041734144

比如，我有一个这样的表单

<form>
  <label>
    Name:
    <input type="text" name="name">
  </label>
  <label>
    Favorite songs:
    <textarea name="songs"></textarea>
  </label>
  <button>Save</button>
</form>

用户体验表明表单“保存”，但默认情况下，在我手中的 iPhone 上，键盘上的蓝色按钮显示的是……“转到”。

这倒没什么大不了的，但我现在有了一些关于这个按钮的选择。我会从 规范 中偷来这段，它将它们称为“输入模式”。

关键字	描述
enter	用户代理应提供操作“输入”的提示，通常会插入新行。
done	用户代理应提供操作“完成”的提示，通常表示没有更多内容要输入，输入法编辑器 (IME) 将关闭。
go	用户代理应提供操作“转到”的提示，通常表示将用户带到他们输入文本的目标。
next	用户代理应提供操作“下一个”的提示，通常会将用户带到下一个可以接受文本的字段。
previous	用户代理应提供操作“上一个”的提示，通常会将用户带到上一个可以接受文本的字段。
search	用户代理应提供操作“搜索”的提示，通常会将用户带到搜索他们输入文本的结果。
send	用户代理应提供操作“发送”的提示，通常会将文本发送到其目标。

作为一个严肃的 Web 专业人员，我还尝试了enterkeykint="poop"，但可惜浏览器没有响应。请注意，在 Android 上，操作按钮不会总是变成文本，而是使用图标。因此，对于值send，您将获得一个小型纸飞机图标，而不是“发送”标签。所以，当然poop 应该变成 💩。

对于上面的小表单示例，enter 或 done 的值对我来说感觉比 go 好一些。如果我想更改它，我会为所有交互式表单元素添加属性

<form>
  <label>
    Name:
    <input type="text" name="name" enterkeyhint="done">
  </label>
  <label>
    Favorite songs:
    <textarea name="songs" enterkeyhint="done"></textarea>
  </label>
  <button enterkeyhint="done">Save</button>
</form>

此属性直接放在表单输入框上，因此在每个输入框上重复编写它感觉有点重复，尤其是在较长的表单中。但这确实让您有机会根据所关注的输入来更改它。

我注意到save 不是一个有效的选项。这似乎很奇怪，因为它感觉像是很多表单都会提供的。也许 Web 平台不想提供一些无法强制执行的选项？我不确定是不是这样，因为如果你输入next 或 previous，并不会改变行为——如果想将焦点移到下一个或上一个输入框，你需要自己编码。默认情况下，操作按钮会像往常一样提交表单。

我偶然发现了这一点，因为 Stefan 最近发推说 Firefox 现在支持它，为这个功能提供了几乎完整的支持。这个功能只与移动浏览器相关（或者，我想，支持虚拟键盘的浏览器？），这让我想到 Firefox Mobile 存在。我太习惯 iOS 上的所有浏览器都是 Safari了（🤬）。但在 Android 上，您可以使用“真正的”Firefox，这提醒我们，不仅存在不同的移动浏览器，而且不同的移动浏览器也有不同的行为。

在这个视频中，我确信它早于对 enterkeyhint 的支持，请注意虚拟键盘如何在聚焦在第一个输入框时自动提供下一个 UI（并且没有直接提交的方法），但在第二个（也是最后一个）输入框上，操作按钮变成了提交按钮（并且没有“上一个”按钮）。这与 iOS 显著不同，iOS 上只提供带有小上下的箭头在键盘本身上方导航输入框的功能。

总而言之，一个非常酷的功能，我们都应该至少知道它，如果不是在大多数我们创建的 HTML 表单上使用它来匹配行为的话。