如何在Android的移动网站中强制使用数字键盘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3372380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force keyboard with numbers in mobile website in Android
提问by ncakmak
I have a mobile website and it has some HTML inputelements in it, like this:
我有一个移动网站，其中包含一些 HTMLinput元素，如下所示：
<input type="text" name="txtAccessoryCost" size="6" />
I have embedded the site into a WebViewfor possible Android 2.1 consumption, so that it will also be an Android application.
我已将该站点嵌入到WebView可能的 Android 2.1 消费中，因此它也将是一个 Android 应用程序。
Is it possible to get the keyboard with numbers instead of the default one with letters when this HTML inputelement is focused?
当这个 HTMLinput元素被聚焦时，是否可以用数字代替默认的字母键盘？
Or, is it possible to set it for the whole application (maybe something in the Manifest file), if it is not feasible for an HTML element?
或者，如果对于 HTML 元素不可行，是否可以为整个应用程序设置它（可能是清单文件中的某些内容）？
回答by Richard Kernahan
<input type="number" />
<input type="tel" />
Both of these present the numeric keypad when the input gains focus.
当输入获得焦点时，这两个都显示数字小键盘。
<input type="search" />shows a normal keyboard with an extra search button
<input type="search" />显示带有额外搜索按钮的普通键盘
Everything else seems to bring up the standard keyboard.
其他一切似乎都带来了标准键盘。
回答by user907860
IMPORTANT NOTE
重要的提示
I am posting this as an answer, not a comment, as it is rather important info and it will attract more attention in this format.
我将此作为答案而不是评论发布，因为它是相当重要的信息，并且会以这种格式吸引更多关注。
As other fellows pointed, you can force a device to show you a numeric keyboard with type="number"/ type="tel", but I must emphasize that you have to be extremely cautious with this.
正如其他人指出的那样，您可以强制设备向您显示带有type="number"/的数字键盘type="tel"，但我必须强调您必须对此非常谨慎。
If someone expects a number beginning with zeros, such as 000222, then she is likely to have trouble, as some browsers (desktop Chrome, for instance) will send to the server 222, which is not what she wants.
如果有人期望以 0 开头的数字，例如000222，那么她可能会遇到麻烦，因为某些浏览器（例如桌面 Chrome）会将 发送到服务器222，这不是她想要的。
About type="tel"I can't say anything similar but personally I do not use it, as its behavior on different telephones can vary. I have confined myself to the simple pattern="[0-9]*"which do not work in Android
关于type="tel"我不能说任何类似的话，但我个人不使用它，因为它在不同电话上的行为可能会有所不同。我把自己局限于pattern="[0-9]*"在 Android 中不起作用的简单
回答by Jesper Grann Laursen
This should work. But I have same problems on an Android phone.
这应该有效。但是我在 Android 手机上遇到了同样的问题。
<input type="number" /> <input type="tel" />
I found out, that if I didn't include the jquerymobile-framework, the keypad showed correctly on the two types of fields.
我发现，如果我不包含 jquerymobile-framework，则键盘会在两种类型的字段上正确显示。
But I havn't found a solution to solve that problem, if you really need to use jquerymobile.
但是我还没有找到解决这个问题的方法，如果你真的需要使用 jquerymobile。
UPDATE:I found out, that if the form-tag is stored out of the
更新：我发现，如果表单标签存储在
<div data-role="page">
The number keypad isn't shown. This must be a bug...
不显示数字键盘。这应该是bug。。。
回答by Reza Ghorbani
inputmodeaccording to WHATWG specis the the default method.
inputmode根据WHATWG 规范是默认方法。
For iOS devices adding patterncould also help.
对于 iOS 设备，添加pattern也有帮助。
For backward compatibility use typeas well since Chrome use these as of version 66.
也用于向后兼容type，因为 Chrome 从版本 66 开始使用这些。
<input
inputmode="numeric"
pattern="[0-9]*"
type="number"
/>
回答by Ali Sheikhpour
Some browsers igoners sending leading zero to the server when the input type is "number". So I use a mixing of jquery and html to load a numeric keypad and also make sure that the value is sent as a text not as a number:
当输入类型为“数字”时，某些浏览器会向服务器发送前导零。所以我混合使用 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">回答by avinash pandit
input type = number
input type = number
When you want to provide a number input, you can use the HTML5 input type="number" attribute value.
当您想提供数字输入时，可以使用 HTML5 input type="number" 属性值。
<input type="number" name="n" />
Here is the keyboard that comes up on iPhone 4:
这是 iPhone 4 上出现的键盘：
iPhone Screenshot of HTML5 input type number Android 2.2 uses this keyboard for type=number:
iPhone 屏幕截图 HTML5 输入类型编号 Android 2.2 使用此键盘输入 type=number：
Android Screenshot of HTML5 input type number
HTML5 输入类型编号的 Android 屏幕截图
回答by Jogai
Add a step attribute to the number input
为数字输入添加 step 属性
<input type="number" step="0.01">
Source: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
来源：http: //blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
