最近在做项目登录注册页面的时候一直在思考一个问题,如何让输入表单的时候,手机软键盘显示“下一步”而非“前往”,随着了解的深入,就顺便总结一下input各类型和手机软键盘的关系。
1.type=text ,ios和安卓都会弹出全键盘,右下角都为go按钮或者是前往
2.type=url , ios和安卓都会弹出带有“/”、“.com”之类的可以快速输入网址的软键盘
3.type=number,ios下会弹出包含数字和各种符号的软键盘,安卓下则会弹出一个类似于拨号键盘的纯数字加部分标点的键盘。
4.type=tel,这会使ios和安卓下都弹出类似于拨号时的数字键盘,所以在移动页面开发中,一般都使用type=tel而非type=number。
5.type=date、datetime、time、mouth。这些只在ios下会弹出ios原生的日期选择器。
6.type=email 这会使ios和安卓都弹出带有“@”键的软键盘。
7.type=search 这会使软键盘右下角的前往键变为一个搜索放大镜按钮,而且输入时输入框右边会有清空按钮。顺便一提,通过css input[type=search]可以修改这个按钮的样式哦!
最后关于“下一步”和“前往”按钮的问题,最近看到了stackoverflow上的两篇回答。
结论如下:
在ios上软键盘右上角有自带的上一步和下一步按钮,在安卓下,键盘右下角总是“前往”按钮,除了“type=number和tel”的情形下右下角总为“下一步”按钮。这个设计很怪异,按理说html5现有的东西完全可以让手机知道当前正在输入表单中的第几个input,手机完全可以凭借这一点去判断调出“下一步”还是“前往”,然而事实并不是这样。
网友们给出的办法只能是一些hack技巧,比如让用户点击“前往”时不提交表单,而是将焦点转向下一个输入框。但总归,当前情况下我们无法改变按钮显示的字。
只能期待随着html5的发展,越来越多的浏览器和设备实现更多的细节上对h5的支持╮(╯▽╰)╭
ps:另外发现,这一点可以用来鉴别一个app是原生app还是hybirdapp,比如你如果在微信中输入账号密码,会发现软键盘会分别显示“下一个”和“完成”。而如果你是用百度贴吧app,你会发现每次都是“前往”。