Html 如何限制可以在 iPhone 上的 HTML5 数字输入字段中输入的字符数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9841363/
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 restrict number of characters that can be entered in HTML5 number input field on iPhone
提问by Lennart Rolland
It seems that neither of the "maxlength", "min" or "max" HTML attributes have the desired effect on iPhone for the following markup:
对于以下标记，“maxlength”、“min”或“max”HTML 属性似乎都没有在 iPhone 上达到预期效果：
<input type="number" maxlength="2" min="0" max="99"/>
Instead of limiting the number of digits or the value of the number entered, the number is just left as it was typed in on iPhone 4. This markup works on most other phones we tested.
没有限制数字的位数或输入的数字的值，而是保留在 iPhone 4 上输入的数字。此标记适用于我们测试的大多数其他手机。
What gives?
是什么赋予了？
Any workarounds?
任何解决方法？
If it is important to the solution, we use jQuery mobile.
如果它对解决方案很重要，我们使用 jQuery mobile。
Thanks!
谢谢！
回答by Will Maginn
Example
例子
JS
JS
function limit(element)
{
var max_chars = 2;
if(element.value.length > max_chars) {
element.value = element.value.substr(0, max_chars);
}
}
HTML
HTML
<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">
If you are using jQuery you can tidy up the JavaScript a little:
如果您使用 jQuery，您可以稍微整理一下 JavaScript：
JS
JS
var max_chars = 2;
$('#input').keydown( function(e){
if ($(this).val().length >= max_chars) {
$(this).val($(this).val().substr(0, max_chars));
}
});
$('#input').keyup( function(e){
if ($(this).val().length >= max_chars) {
$(this).val($(this).val().substr(0, max_chars));
}
});
HTML
HTML
<input type="number" id="input">
回答by Behnam Mohammadi
you can use this code:
您可以使用此代码：
<input type="number" onkeypress="limitKeypress(event,this.value,2)"/>
and js code:
和js代码：
function limitKeypress(event, value, maxLength) {
if (value != undefined && value.toString().length >= maxLength) {
event.preventDefault();
}
}
回答by Andrew Briggs
回答by user3035081
回答by Tripex
Another option with jQuery, but onkeypress event... ;)
jQuery 的另一种选择，但 onkeypress 事件... ;)
$("input[type=number]").on('keypress',function(e) {
var $that = $(this),
maxlength = $that.attr('maxlength')
if($.isNumeric(maxlength)){
if($that.val().length == maxlength) { e.preventDefault(); return; }
$that.val($that.val().substr(0, maxlength));
};
});
回答by jcho360
as Andrew said you need to change the type to range, beside that you are going to have problems with IE and FF and probably old ipad browser because that's from HTML 5, and it's a "Kind New". Take a look to this person who tried the range with JS, Specify range of numbers to input in number field using javascript
正如安德鲁所说，您需要将类型更改为范围，除此之外，您还会遇到 IE 和 FF 以及可能是旧的 ipad 浏览器的问题，因为它来自 HTML 5，而且它是“新产品”。看看这个用 JS 尝试范围的人， 使用 javascript 指定要在数字字段中输入的数字范围
回答by ToshNeox
You can use JavaScript to check how many characters are in the box and if there are too many, remove one: http://www.webcodingtech.com/javascript/limit-input-text.php
您可以使用 JavaScript 检查框中有多少个字符，如果太多，请删除一个：http: //www.webcodingtech.com/javascript/limit-input-text.php
回答by Tom Franssen
Here a more optimized jQuery version that caches the selectors. It also uses the maxlength attribute that is not supported by input type number.
这是一个更优化的 jQuery 版本，用于缓存选择器。它还使用输入类型编号不支持的 maxlength 属性。
// limits the input based on the maxlength attribute, this is by default no supported by input type number
$("input[type=number]").on('keydown keyup',function(){
var $that = $(this),
maxlength = $that.attr('maxlength')
if($.isNumeric(maxlength)){
$that.val($that.val().substr(0, maxlength));
};
});
回答by Daniel Avellaneda
This is Tripex answer optimized for allowing delete key, works when typing and on paste.
这是针对允许删除键进行了优化的 Tripex 答案，在键入和粘贴时有效。
$(document).on("keyup", "#your_element", function(e) {
var $that = $(this),
maxlength = $that.attr('maxlength');
if ($.isNumeric(maxlength)){
if($that.val().length === maxlength) {
e.preventDefault();
// If keyCode is not delete key
if (e.keyCode !== 64) {
return;
}
}
$that.val($that.val().substr(0, maxlength));
}
});
回答by Reza
I know this question is one year old, but I don't prefer the selected answer. Because the way it works is that it shows the character that is typed and then removes it.
我知道这个问题已经有一年了，但我不喜欢选择的答案。因为它的工作方式是显示输入的字符，然后将其删除。
In contrast I will propose another way which is similar to Will's, it is just better in the way that it prevents the character from being shown. Also I've added an else ifblock to check if the character is a number and then it is a good function to validate the number fields.
相比之下，我将提出另一种类似于 Will 的方法，它只是在防止角色被显示的方式上更好。我还添加了一个else if块来检查字符是否是数字，然后它是验证数字字段的好功能。
HTML
HTML
<input type="number" onkeydown="limit(this);">
JS
JS
function limit(element)
{
var max_chars = 2;
if (arguments[1].char !== "\b" && arguments[1].key !== "Left" && arguments[1].key !== "Right") {
if (element.value.length >= max_chars) {
return false;
} else if (isNaN(arguments[1].char)) {
return false;
}
}
}
