如何限制可以在 iPhone 上的 HTML5 数字输入字段中输入的字符数答案

【问题标题】：How to restrict number of characters that can be entered in HTML5 number input field on iPhone如何限制可以在 iPhone 上的 HTML5 数字输入字段中输入的字符数
【发布时间】：2012-04-08 03:22:39
【问题描述】：

对于以下标记，似乎“maxlength”、“min”或“max”HTML 属性在 iPhone 上都没有预期的效果：

 <input type="number" maxlength="2" min="0" max="99"/>

不是限制输入数字的位数或数值，而是保留在 iPhone 4 上输入的数字。此标记适用于我们测试的大多数其他手机。

什么给了？

有什么解决方法吗？

如果对解决方案很重要，我们使用 jQuery mobile。

谢谢！

【问题讨论】：

标签： iphone html jquery-mobile input

【解决方案1】：

例子

JS

function limit(element)
{
    var max_chars = 2;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}

HTML

<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">

如果你使用 jQuery，你可以稍微整理一下 JavaScript：

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

<input type="number" id="input">

【讨论】：

嗨！这种方法工作正常，如果我限制用户最多 1/2/3 个字符，但是一旦我达到 4 个或以上的限制，解决方案就会中断。我想问题是因为在数字字段中添加了“，”，但不确定。请检查此解决方案是否包含 4 个或更多字符。
遗憾的是，我最终依赖于 javascript/jQuery。我不能使用 type="range" 因为它有不同的语义。
不在 keydown 上：否则没有复制/粘贴
使用substring() 代替substr()、developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。

【解决方案2】：

您可以使用此代码：

<input type="number" onkeypress="limitKeypress(event,this.value,2)"/>

和js代码：

function limitKeypress(event, value, maxLength) {
    if (value != undefined && value.toString().length >= maxLength) {
        event.preventDefault();
    }
}

【讨论】：

谢谢，Buddy @Behnam Btw 为什么我们在这里需要 maxlength="2" min="0" max="99" ...??没有它们我猜它工作正常:)
maxlength attr 在 type="number" 的输入中不起作用

【解决方案3】：

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));
    };
});

【讨论】：

这应该是公认的答案！

【解决方案4】：

根据MDN，maxlength 不用于numbers。您是否尝试过：

<input type="number" min="0" max="99" />

或

<input type="range" min="0" max="99" />

【讨论】：

游戏迟到了，但这是如何获得 4 票的？ deffo 不起作用
@TheWalrus 但确实如此。

【解决方案5】：

看看这个，它对我有用；

Is there a minlength validation attribute in HTML5?

【讨论】：

pattern=".{4,4}" ：太棒了

【解决方案6】：

正如安德鲁所说，您需要将类型更改为范围，除此之外，您将遇到 IE 和 FF 以及可能是旧的 ipad 浏览器的问题，因为它来自 HTML 5，而且它是“一种新的”。看看这个用 JS 尝试过范围的人， Specify range of numbers to input in number field using javascript

【讨论】：

【解决方案7】：

您可以使用 JavaScript 检查框中有多少个字符，如果太多，删除一个： http://www.webcodingtech.com/javascript/limit-input-text.php

【讨论】：

【解决方案8】：

这里是缓存选择器的更优化的 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));
    };
});

【讨论】：

【解决方案9】：

我知道这个问题已经有一年了，但我不喜欢选择的答案。因为它的工作方式是显示输入的字符，然后将其删除。

相比之下，我将提出另一种类似于威尔的方式，只是更好地防止角色被显示出来。我还添加了一个else if 块来检查字符是否为数字，然后它是验证数字字段的好功能。

HTML

<input type="number" onkeydown="limit(this);">

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;
        }
    }
}

【讨论】：

【解决方案10】：

这是为允许删除键而优化的 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));
    }
});

【讨论】：

【解决方案11】：

我使用 jQuery 的解决方案：

JS

function maxlength(event)
{
    const ele = event.target;
    const maxlength = ele.maxLength;
    const value = ele.value;
    if (event.type == 'keypress')
    {
        if (value.length >= maxlength)
        {
            event.preventDefault();
        }
    }
    else if (event.type == 'keyup')
    {
        if (value.length > maxlength)
        {
            ele.value = value.substring(0, maxlength);
        }
    }
}

$('input[type=number][maxlength]').on('keypress keyup', maxlength);

HTML

<input type="number" maxlength="2">

【讨论】：