在 Chrome 中输入 type="number" 忽略 maxlength答案

【问题标题】：maxlength ignored for input type="number" in Chrome在 Chrome 中输入 type="number" 忽略 maxlength
【发布时间】：2013-09-01 21:08:37
【问题描述】：

maxlength 属性不适用于<input type="number">。这只发生在 Chrome 中。

<input type="number" class="test_css"  maxlength="4"  id="flight_number" name="number"/>

【问题讨论】：

标签： html google-chrome

【解决方案1】：

来自MDN's documentation for <input>

如果type属性的值为text、email、search、password、tel或url，则该属性指定最大数量用户可以输入的字符（Unicode 代码点）；对于其他控件类型，将被忽略。

所以 maxlength 在设计上会在 <input type="number"> 上被忽略。

根据您的需要，您可以使用min 和max 属性作为他/她的答案中建议的inon（注意：这只会定义一个受限制的范围，而不是实际的字符值的长度，尽管 -9999 到 9999 将涵盖所有 0-4 位数字），或者您可以使用常规文本输入并使用新的 pattern 属性对字段进行验证：

<input type="text" pattern="\d*" maxlength="4">

【讨论】：

另请注意，type="number" 是 HTML 5 规范中的新类型。如果您正在测试的浏览器无法识别type="number"，它会将其视为type="text"，确实尊重maxlength 属性。这可以解释您所看到的行为。
@fooquency，您不在这里，因为您实际上无法通过设置 max 属性将“键盘输入”的物理长度限制为 type=number 输入。此属性仅限制输入的微调器选择的数字。
这里的\d* 是什么？
pattern="\d*" 在 IE11 或 Firefox 56 中不起作用。jsfiddle.net/yyvrz84v
使用regex 和模式是一个令人难以置信的创意。但是在移动设备中，Android 或 iOS 没有什么不同，它是一个 text 输入，所以它会导致错误的 UX。

【解决方案2】：

最大长度不适用于<input type="number" 我知道的最好方法是使用oninput 事件来限制最大长度。请看下面的代码。

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

【讨论】：

太棒了。谢谢！
@Barleby。只需oninput="this.value=this.value.slice(0,this.maxLength)" 应该可以工作
@WashingtonGuedes 上面的代码在 <input type="number"> stackoverflow.com/questions/18510845/… 上为我工作
注意这种方法不会显示前导零！
从技术上讲，number 类型的 maxlength 属性是无效的 HTML5，因此可能会从 Javascript 中删除 .maxLength 属性。我认为最好使用data 属性：<input type="number" data-maxlength="6" oninput="this.value=this.value.slice(0,this.dataset.maxlength)" />

【解决方案3】：

许多人发布了onKeyDown() 事件，该事件根本不起作用，即一旦达到限制就无法删除。因此，不要使用onKeyDown()，而是使用onKeyPress()，它工作得非常好。

下面是工作代码：

User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />

【讨论】：

这非常有帮助，比这里的任何其他答案都更短且更好，同时保持 html5 number 输入类型
我试过了，输入 4 位数字后，文本框就冻结了，没有任何更新的空间，删除键和退格键都不起作用，没有任何作用，如何编辑任何数字，请提及。跨度>
我可以进入你的 sn-p (1.2.3.4.5.5.6.76.7)
这应该是公认的答案。保留数字字段的非常聪明的方法。只要确保添加一个最小/最大属性，因为如果使用旋转按钮，它们仍然可以超过 4 位数字
当您输入 9999 并在输入时按向上按钮时不起作用。

【解决方案4】：

我有两种方法可以做到这一点

首先：使用type="tel"，它会像type="number"在移动设备中一样工作，并接受maxlength：

<input type="tel" />

第二：使用一点 JavaScript：

<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />

【讨论】：

你的第二个答案不是很好：如果你达到了 2 个字符，你不能删除任何数字。
是的，我还注意到一个数字输入不返回 value.length，无论如何，我编辑了它，包括 Backspace 键码
数组键和删除（前进）按钮也应该包括在内。
这个不错。这只对我有用..upvoted
很好的答案，tnx。但是，在这种情况下，我没有理由使用“tel”而不是“number”。此外，在自然数字的情况下，您可以将“event.keyCode！=8”的条件替换为“event.keyCode>47 && event.keyCode

【解决方案5】：

您可以使用 min 和 max 属性。

下面的代码做同样的事情：

&lt;input type="number" min="-999" max="9999"/&gt;

【讨论】：

我想说这应该是正确的答案。 Chrome 至少会根据最小/最大参数合理地调整框的大小。
如果您想添加长度限制，这不起作用，但您将无法超过数字9999，用户可以手动输入超过该长度的数字。
这是怎么得到 37 票的！！！

【解决方案6】：

这也适用于 Android

将输入类型更改为文本并使用“oninput”事件调用函数：

<input type="text" oninput="numberOnly(this.id);" maxlength="4" id="flight_number" name="number"/>

现在使用 Javascript Regex 过滤用户输入并将其限制为仅数字：

function numberOnly(id) {
    // Get element by id which passed as parameter within HTML element event
    var element = document.getElementById(id);
    // This removes any other character but numbers as entered by user
    element.value = element.value.replace(/[^0-9]/gi, "");
}

演示：https://codepen.io/aslami/pen/GdPvRY

【讨论】：

我找到的最佳“仅限数字”答案。其他使用 evt.keycode 的人似乎在我的 android 上失败了
一个非常小的mod，把“this.id”改成“this”，把numberOnly(id)改成numberOnly(element)，那么第一行就不需要numberOnly了身份证
这是我找到的简单方法。这是我的反应代码：<input ref={AreaRef} type="text" onInput={(e)=>{AreaRef.current.value = e.target.value.replace(/[^0-9]/gi, "")}} />

【解决方案7】：

对于 React 用户，

只需将 10 替换为您的最大长度要求

 <input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>

【讨论】：

谢谢！你也可以像这样在 HTML 中使用它： onInput="this.value = this.value.slice(0, 10)"

【解决方案8】：

我曾经遇到过同样的问题，并根据我的需要找到了这个解决方案。它可能对某些人有所帮助。

<input type="number" placeholder="Enter 4 Digits" max="9999" min="0" 
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>

快乐编码:)

【讨论】：

【解决方案9】：

你也可以试试这个有长度限制的数字输入

<input type="tel" maxlength="4" />

【讨论】：

在某些浏览器（特别是移动浏览器）中，tel 输入将被自动验证，在某些奇怪的情况下，前导 0s 将更改为 1s。
这个肮脏的解决方案imo的另一个问题是浏览器的自动完成被触发。如果您确实将 tel 指定为输入类型（我不会）添加一个 autocomplete="off" 标签

【解决方案10】：

尝试使用电话：

 maxlength="5" type="tel"

【讨论】：

这应该是正确的答案——在多种设备和浏览器上测试。
有效，但删除了使用箭头键增加/减少值的能力
但 tel 类型仍然允许使用字母数字。 Type Number 要求仅接受数字 [0-9]。电话不能代替号码

【解决方案11】：

如何限制输入类型最大长度

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

【讨论】：

【解决方案12】：

<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

演示 - JSFIDDLE

【讨论】：

【解决方案13】：

这是我使用 jQuery 的解决方案... 您必须将 maxlength 添加到您的输入 type=number

$('body').on('keypress', 'input[type=number][maxlength]', function(event){
    var key = event.keyCode || event.charCode;
    var charcodestring = String.fromCharCode(event.which);
    var txtVal = $(this).val();
    var maxlength = $(this).attr('maxlength');
    var regex = new RegExp('^[0-9]+$');
    // 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9
    if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){
        return true;
    }
    // maxlength allready reached
    if(txtVal.length==maxlength){
        event.preventDefault();
        return false;
    }
    // pressed key have to be a number
    if( !regex.test(charcodestring) ){
        event.preventDefault();
        return false;
    }
    return true;
});

并处理复制和粘贴：

$('body').on('paste', 'input[type=number][maxlength]', function(event) {
    //catch copy and paste
    var ref = $(this);
    var regex = new RegExp('^[0-9]+$');
    var maxlength = ref.attr('maxlength');
    var clipboardData = event.originalEvent.clipboardData.getData('text');
    var txtVal = ref.val();//current value
    var filteredString = '';
    var combined_input = txtVal + clipboardData;//dont forget old data

    for (var i = 0; i < combined_input.length; i++) {
        if( filteredString.length < maxlength ){
            if( regex.test(combined_input[i]) ){
                filteredString += combined_input[i];
            }
        }
    }
    setTimeout(function(){
        ref.val('').val(filteredString)
    },100);
});

我希望它对某人有所帮助。

【讨论】：

我有同样的想法（虽然我使用了“输入”事件），但我认为@WashingtonGuedes 在对另一个答案的评论中写的解决方案要简单得多：this.value = this.value.slice(0, this.maxLength); 你认为这个有什么问题吗？到目前为止我还没有找到。它也涵盖粘贴的文本。
我喜欢漫长的路。 RegExp 的使用非常灵活。

【解决方案14】：

我写了一个小而干净的解决方法。使用此功能将使其正常工作

  const inputHandler = (e) => {
    const { value, maxLength } = e.target;
    if (String(value).length >= maxLength) {
      e.preventDefault();
      return;
    }
  };

例如，它可以像这样在 React 中使用：

<input
  type="number"
  maxlength="4"
  onKeyPress={inputHandler}
/>

【讨论】：

【解决方案15】：

根据我的经验，人们询问为什么忽略 maxlength 的大多数问题是因为允许用户输入超过“允许”数量的字符。

正如其他 cmets 所述，type="number" 输入没有 maxlength 属性，而是有 min 和 max 属性。

要让字段限制可以插入的字符数，同时允许用户在提交表单之前知道这一点（浏览器应该识别 value > max 否则），您必须（目前，至少) 向该字段添加一个侦听器。

这是我过去使用过的解决方案：http://codepen.io/wuori/pen/LNyYBM

【讨论】：

min 和 max 在这里一样好用，它们不会阻止用户在输入字段中输入无限数量的数字。
是的。只有当您使用箭头键或向上/向下控制器（在 Chrome 等中）时才能看到它们的作用。您仍然可以使用这些属性与您的后续验证相关联，这对我很有用。这允许您通过标记（i18n 等）与仅 JS 控制限制。

【解决方案16】：

输入 type="number" 忽略最大长度

没错，请参阅文档here

相反，您可以使用type="text" 并使用javascript 函数来只允许数字。

试试这个：

function onlyNumber(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)){
            return false;
        }
    return true;
}

&lt;input type="text" maxlength="4" onkeypress="return onlyNumber(event)"&gt;

【讨论】：

【解决方案17】：

试试这个，

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

【讨论】：

【解决方案18】：

Chrome（技术上，Blink）will not implement maxlength for <input type="number">。

The HTML5 specification 表示 maxlength 仅适用于 text、url、e-mail、search、tel 和 password 类型。

【讨论】：

对前面没有提到的内容没有添加任何有用的东西

【解决方案19】：

完成！仅数字和 maxlength 完美。

<input  maxlength="5" data-rule-maxlength="5" style="height:30px;width: 786px;" type="number"  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength); this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

【讨论】：

【解决方案20】：

我知道已经有了答案，但是如果您希望输入的行为与 maxlength 属性完全相同或尽可能接近，请使用以下代码：

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

【讨论】：

我喜欢这个，稍微调整一下以供自己使用，（我不希望人们在 chrome 中输入“e”，这是允许的）；

【解决方案21】：

我最近刚刚尝试的绝对解决方案是：

<input class="class-name" placeholder="1234567" name="elementname"  type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

【讨论】：

因为这是通用的 JS，它可以在任何地方工作。我正在使用 Angular 5 开发一个项目，它就像一个魅力。你可能会花 10 分钟在你的 Angular 代码中创建一个服务，这样你就可以在整个项目中重复使用它。

【解决方案22】：

使用正则表达式输入类型文本和 oninput 事件以仅接受对我有用的数字。

<input type="text" maxlength="4" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

【讨论】：

【解决方案23】：

如果您想在 React 函数组件 中执行此操作或不使用 "this"，这里有一种方法。

    <input onInput={handleOnInput}/>

    const handleOnInput = (e) => {
    let maxNum = 4;
    if (e.target.value.length > maxNum) {
      e.target.value = e.target.value.slice(0, maxNum);
    }
  };

【讨论】：

谢谢，这对我有用。另外我更新了这个：let maxNum = 4; 到let maxNum = e.target.getAttribute('maxlength'); 这样我可以在我的代码中使用任何最大长度数字，这应该可以工作。

【解决方案24】：

根据上面 Neha Jain 的回答，我只是在公共区域添加了以下代码

$(':input[type="number"]').on('input', function() {
        if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);

});

然后您可以使用 maxlength="4" 之类的文本类型字段。

【讨论】：

【解决方案25】：

以下代码将允许用户：

仅输入 0-999 范围内的数字。
这也限制了用户不能输入超过 3 个字符。
当用户输入超过 3 个字符时，它将清除文本框。

<input type="number" name="test_name" min="0" max="999" oninput="validity.valid||(value='');">

【讨论】：

【解决方案26】：

<input type="number"> 只是...一个数字输入（虽然，未通过 Javascript 从字符串转换为浮点数）。

我的猜测，它不会限制 maxLength 的键输入字符，否则如果用户忘记开头的小数点，您的用户可能会陷入“键陷阱”（尝试将 . 放在索引 @ 987654324@ 当 <input type"text"> "maxLength" attr 已经达到）。但是，如果您设置 max 属性，它将在表单提交时验证。

如果您尝试限制/验证电话号码，请使用 type="tel" attr/value。它遵循maxLength attr 并仅调出手机号码键盘（在现代浏览器中），您可以将输入限制为模式（即pattern="[0-9]{10}"）。

【讨论】：

【解决方案27】：

这段代码对我来说效果很好。

在type="number"的输入中，可以添加如下属性：

oninput="constrainUserInput(this.id)"

完整的输入将如下所示：

<input type="number" class="test_css" maxlength="4" oninput="constrainUserInput(this.id)" id="flight_number" name="number"/>

注意：您必须指定您的输入和 ID 才能使此方法起作用

然后您可以将以下 JavaScript 添加到您的 HTML 中，它基本上将任何超出您的 maxlength 属性的字符替换为空引号（基本上是删除它们）：

function constrainUserInput(id) {
  let input = document.getElementById(id);
  let value = input.value;
  if (value.length > input.maxLength) {
    input.value = value.substring(0, input.maxLength);
  }
}

【讨论】：

【解决方案28】：

我会让这个简单易懂！

使用min='' 和max='' 代替type='number' 的maxlength（maxlength 旨在定义text 类型中字符串的最大字母数量）。

干杯

【讨论】：

【解决方案29】：

我可以使用它存档它。

<input type="text" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" maxlength="4">

【讨论】：

【解决方案30】：

maxlenght - 输入类型文本

<input type="email" name="email" maxlength="50">

使用 jQuery：

$("input").attr("maxlength", 50)

maxlenght - 输入类型编号

JS

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

HTML

<input type="number" name="telefono" onkeydown="limit(this, 20);" onkeyup="limit(this, 20);">

【讨论】：