基于iOS对网页的规则，当输入类型为不同值时，软键盘的弹出规则，尤其是右下角的按钮名称,非常值得注意。以为例，在Android部分正常显示，右下角有一个蓝白相间的“搜索图标”。但iOS仍然沿用默认的“环绕”效果。很多人会这样做：onHandleSearch(e){if(e.keyCode==13){e.preventDefault();//处理业务搜索逻辑}}点击按钮时监听，如果按下回车（右下角蓝色按钮），就是我们需要的。但是你需要禁用默认事件-换行操作。这个逻辑看似没有问题，但是如果不考虑用户体验，在视觉上很有可能会被否决。解决这个问题有两种方法：表单和输入第一种方法当然是“外援”。将form标签包裹在输入周围，并确保它具有action属性。我们可以让按钮显示出我们想要的效果。像这样：type为其他值也可以正常显示，此时不需要另外禁止方法中的默认操作！我找不到任何解释。但是有一种猜测：form是原生HTML为与后台进行数据交互做准备的一种解决方案。如果input标签里面有包裹着action的form标签，一般认为是给界面提供数据。这一步伴随着一个跳转操作，与iOS原生的换行操作相反，所以iOS对此进行了验证，取消了原有的逻辑，增加了开发者提供的type值的权重，用于显示图标和执行后续逻辑。这个场景证明了这一点：在输入框回车时，页面会自动刷新。为避免这种情况，您可以添加一个隐藏的输入——如果您必须像这样使用它：经过实验，我们可以得出如下结论：如果只输入type=使用了“search”，没有放在form标签中，“回车符”仍然会显示；如果你把它放在一个表单中，但是使用type="text"，它会显示"Go"；如果放在一个form里面，使用inputtype="search"，但是没有action属性，Android不会有问题，但是在IOS8及以上的系统中，"search"是不会显示在键盘上的，但是“换行符”输入模式和软键盘类型。上述方案没有考虑到另一种场景：日益标准化的“语义”。比如在电子商务中，通常有一个只能输入数字的UI。而数字类型的输入框虽然可以调出数字键盘，但语义不一致，会影响辅助设备的识别。tel类型也是如此。但是inputmode属性还好，而且考虑到了iOS中按钮的性能，很牛逼。inputmode通常有以下属性值：none：不使用虚拟键盘，此时页面需要使用自定义键盘代替text：默认值，标准输入键盘会显示decimal：小数表示键盘，和除数字外，可能还有小数点。或千分号逗号，数字：显示0-9的数字键盘tel：手机数字键盘，有星号*或井号#搜索：提交按钮会显示'搜索'或'搜索'电子邮件：有键盘上会有@Symbolkeyurl:键盘上会有斜杠/符号键。实测后看看最常用最实用的属性值：数字键盘，并且支持小数点（相对于上面的type=number）但是这里又出现了一个小问题。在输入模式下，Android可以改为输入“符号”……这就需要js的介入了。searchsearchbox：在iOS中inputmode在search下的表现并不完美，但可以用来支持上面的猜测——search在语义上与iOS的默认逻辑相反。与没有换行的原始类型：相比，我们可以发现两个系统中的小数和数字键盘是相同的。inputmode搜索在iOS上表现稍好。所以笔者认为，如果采用该方案，在iOS下一些特殊场景需要数字和需要搜索的时候，建议使用inputmode而不是type。好久不见了，正在写另一篇关于最近项目数据方面的研究文章。本文为小作文，仍属于对用户体验的研究。应该对一些朋友的项目有帮助。
