关于html5:随笔移动端input-type｜语义与IOS按键

基于 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：键盘上会有斜杠 / 符号键

咱们拿最常见也是实测后最实用的属性值来看下：

1. 数字键盘，且反对小数点（比照下面的type=number）

<input inputmode="decimal">

但这里又个小问题。inputmode下 Android 反而能够输出“符号”了 … 这就须要 js 染指了。

2. search 搜寻框：inputmode 在 search 下 iOS 中的体现并不很完满，但这里倒是能够用来佐证下面的猜想 —— search 在语义上和 iOS 默认逻辑相背。

<input inputmode="search">

比照原生的、没有 form 包裹的 type：

<input type="search">

能够发现，在两个零碎下 decimal 和 numeric 键盘都是一样的。而 inputmode 的 search 在 iOS 下体现略好。

所以笔者感觉，如果用这种计划，倡议在有 number 须要的时候、以及在一些非凡场景的 iOS 下有 search 须要的时候能够用 inputmode 代替type，其余时候还是老老实实该咋用咋用吧～

鸽了挺久了，另一篇对于最近我的项目中数据方面的钻研文章正在写作中，本文一篇小随笔奉上，仍然属于用户体验方面的钻研。应该能对一些敌人的我的项目有帮忙。