乐趣区

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

基于 iOS 对 web 页面的规定,inputtype 为不同值时软键盘的弹出规定尤其是右下角按键名就十分值得注意。

<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 向后端进行数据交互筹备的计划,如果有携带 actionform标签包裹 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 染指了。

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

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

<input type="search">

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

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


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

退出移动版