移动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，你会发现每次都是“前往”。