如何在Android手机网站强制使用数字键盘
我有一个移动网站,它有一些HTML input
元素,就像这样:
<input type="text" name="txtAccessoryCost" size="6" />
我已经将该网站embedded到可能的Android 2.1消费的WebView
中,以便它也将是一个Android应用程序。
当这个HTML input
元素被关注时,是否可以用数字而不是默认的字母来获得键盘?
或者,是否有可能为整个应用程序(可能是Manifest文件中的某些东西)设置它,如果它不适用于HTML元素?
<input type="number" /> <input type="tel" />
当input获得焦点时,这两个都会显示数字键盘。
<input type="search" />
显示带有额外searchbutton的普通键盘
一切似乎都提出了标准的键盘。
重要的提示
我发布这个答案,而不是一个评论,因为这是相当重要的信息,它会吸引更多的关注在这种格式。
正如其他人指出的,你可以强迫一个设备向你展示一个type="number"
/ type="tel"
的数字键盘,但是我必须强调你必须对此非常谨慎。
如果有人期望一个以零开头的数字,比如000222
,那么她可能会遇到麻烦,因为有些浏览器(例如桌面版Chrome)会发送到服务器222
,这不是她想要的。
关于type="tel"
我不能说任何类似的东西,但我个人并不使用它,因为它在不同的电话上的行为可能会有所不同。 我只局限于简单pattern="[0-9]*"
,这在Android中不起作用
这应该工作。 但是我在Android手机上遇到同样的问题。
<input type="number" /> <input type="tel" />
我发现,如果我没有包括jquerymobile框架,键盘显示正确的两种types的领域。
但是,如果你真的需要使用jquerymobile,我还没有find解决这个问题的解决scheme。
更新:我发现,如果窗体标签存储在
<div data-role="page">
数字键盘没有显示。 这一定是一个错误…
当inputtypes为“数字”时,一些浏览器igoners向服务器发送前导零。 所以我使用jquery和html的混合来加载一个数字小键盘,并确保这个值是作为一个文本发送,而不是一个数字:
$(document).ready(function(){ $(".numberonly").focus(function(){$(this).attr("type","number")}); $(".numberonly").blur(function(){$(this).attr("type","text")}); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="numberonly">
为号码input添加一个步骤属性
<input type="number" step="0.01">
资料来源: http : //blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
input type = number
当您要提供数字input时,可以使用HTML5inputtypes=“数字”属性值。
<input type="number" name="n" />
这是iPhone 4上的键盘:
HTML5inputtypes号的iPhone屏幕截图Android 2.2使用此键盘inputtype = number:
HTML5inputtypes编号的Android屏幕截图