【随笔】移动端input type｜语义与IOS按键

基于iOS对web页面的规则，input的type为不同值时软键盘的弹出规则尤其是右下角按键名就非常值得注意。

以为例，在安卓段展示正常，右下角是一个蓝白“搜索图标”。但iOS仍然遵循默认“换行”效果。以至于不少人会这么做：

onHandleSearch(e) {
    if(e.keyCode == 13) {
        e.preventDefault();
        //处理业务搜索逻辑
    }
}

点击按钮的时候监听，如果按下的是enter（就是右下角蓝色的按键），则是我们需要的。但是接下来需要先禁止默认事件 —— 换行操作。

这样在逻辑上似乎没有什么问题，但没有考虑用户体验，到了视觉那里大概率还是被一言打回的。

有两种方法可以解决这个问题：

form与input

第一种方法当然是“外援”。将input外层包裹form标签并保证有一个 action 属性。就能让按键按照我们想要的效果展示。就像这样：

type 为其它值时也能正常展示了，而且这时并不需要在方法中额外禁止默认操作！

这一点笔者并没有找到相关说明。但是有一个猜测：form是原生 HTML 向后端进行数据交互准备的方案，如果有携带action的form标签包裹input标签，一般会认为要向接口提供数据。这一步伴随有跳转操作，是与iOS原生的换行操作是对立的，所以 iOS 对这里进行了校验，取消原有逻辑而提高开发者提供的type值权重进行展示图标并执行后续逻辑。
与之佐证的是这个场景：

在输入框中按下回车时，页面会自动刷新。
要避免此情况，可以在添加一个隐藏的input —— 如果你非要这么用的话：

经过试验，我们可以总结如下：

如果只使用input type="search"，而不放到form标签中，则仍显示“回车符号”；
如果放到form中，但是使用type="text"，则显示“前往”；
如果放到form中，使用input type="search"，但没有action属性，Android不会有问题，但在 IOS8 以上的系统中，键盘上仍不会显示“搜索”，而是显示“换行符号”