移动web开发-input与手机软键盘的关系

最近在做项目登录注册页面的时候一直在思考一个问题，如何让输入表单的时候，手机软键盘显示“下一步”而非“前往”，随着了解的深入，就顺便总结一下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，你会发现每次都是“前往”。