Html 使用输入文本在 iPhone 中显示数字键盘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16456150/
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
Show numeric keyboard in iPhone using input text
提问by red23jordan
Notice that using input type="number"can display a numeric keyboard as below:
请注意，使用input type="number"可以显示数字键盘，如下所示：
Is it possible to use input type="text"to display the same numeric keyboard? I do notwant to display a number pad using pattern="\d*"because it is possible that the value will contain a decimal place.
是否可以用于input type="text"显示相同的数字键盘？我并不想用显示的数字键盘pattern="\d*"，因为它是可能的值将包含一个小数位。
The reason I would like to use input type="text"instead of input type="number"is that I cannot get back the value if I input a non-number for a number field. For example, if I input ABC, it will become empty automatically. It seems to me that using input type="text"will be easier for this kind of control.
我想使用input type="text"而不是的原因input type="number"是，如果我为数字字段输入非数字，则无法取回该值。例如，如果我输入ABC，它会自动变为空。在我看来，使用input type="text"这种控制会更容易。
回答by davidelrizzo
If your input is a true number, integer or decimal then use the HTML5 type="number"input. This will bring up correct keyboard on Android devices (assume Windows phone too).
如果您的输入是真正的数字、整数或小数，则使用 HTML5type="number"输入。这将在 Android 设备上调出正确的键盘（也假设 Windows 手机）。
Then the trick is to place a pattern="[0-9]*"on that attribute to force the special numeric keypad on iOS. Note that:
然后诀窍是pattern="[0-9]*"在该属性上放置一个以强制在 iOS 上使用特殊的数字键盘。注意：
- This will not mark a decimal or minus sign as invalid because the pattern attribute is actualy NOT valid on a type="number" field!and
- This is the ONLYway to get the iOS numeric keyboard. See difference between the number section of the alpha keyboard (as in your screenshot above) compared to the true numeric keyboard.
- 这不会将小数或减号标记为无效，因为模式属性实际上在 type="number" 字段上无效！和
- 这是获取 iOS 数字键盘的唯一方法。查看与真正的数字键盘相比，字母键盘的数字部分（如上面的屏幕截图所示）之间的区别。
One last note, be sure NOT TO use the type number field for inputs that are not true numbers (eg. zipcodes with leading zeros or product codes with comas or spaces). A numeric input field MAY NOT SUBMIT values that are not true numbers! (depending on browser/device)
最后一点，请确保不要将类型编号字段用于非真实数字的输入（例如，带有前导零的邮政编码或带有逗号或空格的产品代码）。数字输入字段可能不会提交不是真实数字的值！（取决于浏览器/设备）
回答by Behnam Mohammadi
use this code:
使用此代码：
<input type="number" pattern="[0-9]*" />
回答by Jeff Monteiro
The numeric keyboard provided by Apple on iOS is sad joke. But, you can fix this using:
Apple 在 iOS 上提供的数字键盘是一个悲伤的笑话。但是，您可以使用以下方法解决此问题：
inputmode="decimal"
Work fine on Android, off course.
当然，在 Android 上运行良好。
:)
:)
回答by Harry
There are other types which can display numeric keyboard.
还有其他类型可以显示数字键盘。
With type="number" you can do nothing. It won't accept anything but numbers. But if you use type="tel", it's an ugly hack, but it works.
使用 type="number" 你什么也做不了。除了数字，它不会接受任何东西。但是如果你使用 type="tel"，这是一个丑陋的黑客，但它有效。
Here's my zip code example:
这是我的邮政编码示例：
<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">
There will however be a problem with "-" key on some screen keyboards, you can work around this problem with adding the dash after specified number of characters in JavaScript like this:
但是，某些屏幕键盘上的“-”键会出现问题，您可以通过在 JavaScript 中指定数量的字符后添加破折号来解决此问题，如下所示：
// Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
var t = event.target, v = t.value;
if (v.length == 2) { t.value = v + '-'; }
});
(Please excuse jQuery). Instead of using type="tel" you can use type="text" and pattern property, but I haven't tested it yet. Most likely it wouldn't work with most browsers.
（请原谅jQuery）。您可以使用 type="text" 和模式属性，而不是使用 type="tel"，但我还没有测试过。很可能它不适用于大多数浏览器。
回答by Venkat Reddy
I couldnt find any solution for that as of now.
到目前为止，我找不到任何解决方案。
But one possible trick you could do is use type="number" and change it in javascript with document.getElementById("element").type="text";
但是你可以做的一个可能的技巧是使用 type="number" 并在 javascript 中使用 document.getElementById("element").type="text"; 更改它。
but however this would also clear the ABC but it would accept numbers commas and decimals
但是这也会清除 ABC 但它会接受数字逗号和小数
回答by Jhonatan Muller
Try this workarround. Worked for me.
试试这个解决方法。为我工作。
It will turn type to number then return back to text.
This will force ios to switch to numeric keybord on the first prop change.
The setSelectionRangeis for select the input value.
它会将类型转换为数字，然后返回文本。这将强制 ios 在第一次道具更改时切换到数字键盘。的setSelectionRange是用于选择输入值。
$(function(){
$("input[type='text']").on('mouseup', function(e){
e.preventDefault();
});
$("input[type='text']").on('focus click', function(e){
$(this).prop('type', 'number');
var obj = $(this);
setTimeout(function(){
obj.prop('type', 'text');
document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
}, 50);
});
});
