共计 2069 个字符，预计需要花费 6 分钟才能阅读完成。
基于 iOS 对 web 页面的规定，input的 type 为不同值时软键盘的弹出规定尤其是右下角按键名就十分值得注意。
以 <input type="search /"> 为例，在安卓段展现失常，右下角是一个蓝白“搜寻图标”。但 iOS 依然遵循默认“换行”成果。以至于不少人会这么做：
<input type="search" v-model="searchName" xxx @keypress="onHandleSearch($event)" />onHandleSearch(e) {if(e.keyCode == 13) {e.preventDefault();
// 解决业务搜寻逻辑
}
}点击按钮的时候监听，如果按下的是 enter（就是右下角蓝色的按键），则是咱们须要的。然而接下来须要先禁止默认事件 —— 换行操作。
这样在逻辑上仿佛没有什么问题，但没有思考用户体验，到了视觉那里大概率还是被一言打回的。
有两种办法能够解决这个问题：
form 与 input
第一种办法当然是“外援”。将 input 外层包裹 form 标签并保障有一个 action 属性。就能让按键依照咱们想要的成果展现。就像这样：
<form action="javascript: void(0);" @submit="onHandleSearch">
<input type="search" v-model="searchName" xxx />
</form>type 为其它值时也能失常展现了，而且这时并不需要在办法中额定禁止默认操作！
这一点笔者并没有找到相干阐明。然而有一个猜想：form是原生 HTML 向后端进行数据交互筹备的计划，如果有携带 action 的form标签包裹 input 标签，个别会认为要向接口提供数据。这一步随同有跳转操作，是与 iOS 原生的换行操作是对抗的，所以 iOS 对这里进行了校验，勾销原有逻辑而进步开发者提供的 type 值权重进行展现图标并执行后续逻辑。
与之佐证的是这个场景：
<form action="." >
<input type='search' />
</form>在输入框中按下回车时，页面会主动刷新。
要防止此状况，能够在增加一个暗藏的 input —— 如果你非要这么用的话：
<form action="." >
<input id="iptSearch" type='search' />
<input type="text" style="display:none;"/>
</form>通过试验，咱们能够总结如下：
- 如果只应用
input type="search"，而不放到form标签中，则仍显示“回车符号”； - 如果放到
form中，然而应用type="text"，则显示“返回”； - 如果放到
form中，应用input type="search"，但没有action属性，Android 不会有问题，但在 IOS8 以上的零碎中，键盘上仍不会显示“搜寻”，而是显示“换行符号”
inputmode 与软键盘类型
下面的计划没有很好的关照到另一个场景：日益标准的“语义化”。
比方在电商中通常有“仅可输出数字”的 UI。但
<input type="number">number 类型的输入框是能够呼起数字键盘的，但语义却是不合乎的，会影响辅助设施的辨认。tel 类型也是一样的情理。
但 inputmode 属性能够，而且兼顾到了 iOS 中按键的体现，体现堪称十分亮眼。
inputmode 通常有如下属性值：
- none：不应用虚构键盘，这个时候页面须要应用自定义的键盘代替
- text：默认值，会显示规范输出键盘
- decimal：小数示意键盘，除了数字之外可能会有小数点
.或者千分符逗号, - numeric：显示 0-9 的数字键盘
- tel：手机数字键盘，而且有星号
*或者井号#键 - search：提交按钮会显示 ‘
search‘ 或者‘搜寻’ - email：键盘上会有
@符号键 - url：键盘上会有斜杠
/符号键
咱们拿最常见也是实测后最实用的属性值来看下：
- 数字键盘，且反对小数点（比照下面的
type=number）
<input inputmode="decimal">但这里又个小问题。
inputmode下 Android 反而能够输出“符号”了 … 这就须要 js 染指了。
- search 搜寻框：inputmode 在 search 下 iOS 中的体现并不很完满，但这里倒是能够用来佐证下面的猜想 —— search 在语义上和 iOS 默认逻辑相背。
<input inputmode="search">比照原生的、没有 form 包裹的 type：
<input type="search">能够发现，在两个零碎下 decimal 和 numeric 键盘都是一样的。而 inputmode 的 search 在 iOS 下体现略好。
所以笔者感觉，如果用这种计划，倡议在有 number 须要的时候、以及在一些非凡场景的 iOS 下有 search 须要的时候能够用 inputmode 代替type，其余时候还是老老实实该咋用咋用吧～
鸽了挺久了，另一篇对于最近我的项目中数据方面的钻研文章正在写作中，本文一篇小随笔奉上，仍然属于用户体验方面的钻研。应该能对一些敌人的我的项目有帮忙。
