by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9550
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、手机上的回车键可以自定义了

iOS 13.7+，以及Chrome77+新支持了一个HTML属性enterkeyhint，可以修改软键盘中的enter键，也就是回车键的文案或者UI。

该HTML属性的兼容性如下图所示：

关于enterkeyhint的规范文档可以参见这里。

然后下表就是规范中定义的支持的属性值和对应的含义：

然后查找相关资料的时候发现了一个推（作者Stefan Judis @stefanjudis），上面有不同的enterkeyhint属性值在iOS和Android系统下的软键盘效果示意。

缩略图如下所示（点击图片可以查看原图 333k）：

上面这张图还是很直观的。

但是国情不同，显示的效果可能也有所不同，所以还需要测试下。

二、实际访问测试

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9550（作者张鑫旭）

专门做了个简易的测试页面，您可以狠狠地点击这里：HTML enterkeyhint属性与软键盘demo

或者识别下面的二维码：

进入页面后，分别focus 3个搜索框查看不同的效果（如下下图所示），其中第1个搜索框什么都没有设置，第2个搜索框设置的是enterkeyhint="done"，第3个搜索框设置的是enterkeyhint="search"。

我个人（张鑫旭）的测试结果

显然我自己也要测试下，我就先打开我的iPhone，扫啊扫，刷啊刷，结果怎么都没有效果，结果一看版本……他爷爷的，我的iPhone版本才iOS 12，版本不够。

更新于2021-12-29
有新的iPhone了，系统是15.1，看了下，第2个输入框是完成，第3个输入框是搜索。

——

幸好家里iPad版本是足够的，iPad测了下，就第2个输入框软键盘中的回车键会选中高亮，然后就和第1/3这两个输入框没有任何区别，没有文案的变化，好弱，所以没放截图。

看来还是需要手机测试下，于是拿出我的Android手机测试下，幸好装的Chrome浏览器版本足够，然后看出了明显的区别。

第2个搜索框设置的是enterkeyhint="done"，结果键盘中上确认按钮上的文案是“换行”，可以参见下图右下方圈圈中的内容：

第3个搜索框设置的是enterkeyhint="search"，结果键盘中上确认按钮上的文案是“搜索”，且高亮，如下截屏右下角箭头方向所示：

可以明显看出enterkeyhint属性发挥了作用。

三、没有语义化的时候才需要enterkeyhint

上面的测试有个很有趣的现象，那就是第1个搜索框虽然没有任何enterkeyhint属性的设置，但是键盘上的文字也是“搜索”，究其原因就是因为HTML本身语义化足够出色。

包括输入框的类型设置的是type="search"，同时放在了<form>元素中，这样点击“搜索”按钮会自动触发表单的提交行为。

所以，只要我们平时的表单控件的HTML语义使用足够的好，是不需要设置enterkeyhint属性的，设备会自己根据语义选择合适的enter键上的文案和行为的。

什么时候才需要enterkeyhint属性呢？

比方说明明是个搜索框，但是设置的确实type="text"，则就需要使用enterkeyhint属性指定enter键上的文案了，例如：

<input enterkeyhint="search" placeholder="搜索">

所以，本文适合那些div打天下的小伙伴们。

以上~

最后欢迎反馈iPhone下的测试效果截图，帮助完善本文内容；当然，也欢迎分享本文，比心。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=9550

（本篇完）