Question

似乎“maxlength”，“min”或“max”HTML属性都没有对iPhone产生以下标记所需的效果：

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

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

是什么给出了？

有任何解决方法吗？

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

谢谢！

Answer 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">

Answer 2

根据MDN，maxlength未使用number。你有没有尝试过：

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

OR

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

Answer 3

检查一下，它对我有用;

Is there a minlength validation attribute in HTML5?

Answer 4

您可以使用此代码：

<input type="number" maxlength="2" min="0" max="99"
       onkeypress="limitKeypress(event,this.value,2)"/>

和js代码：

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

Answer 5

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

Answer 6

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

Answer 7

这是一个更优化的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));
    };
});

Answer 8

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

Answer 9

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

相比之下，我将提出另一种类似于Will的方法，它更好地防止角色被显示。另外，我添加了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;
        }
    }
}

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

Answer 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">

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

11 个答案: