在Chrome中输入类型="数字"忽略maxlength

Question

该maxlength属性无法使用<input type="number">.这只发生在Chrome中.

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

Answer 1

来自MDN的文档<input>

如果值类型属性是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">

Answer 2

最大长度将无法使用<input type="number"我知道的最佳方式使用oninput事件来限制maxlength.请参阅以下代码.

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

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

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

Answer 5

您可以使用min和max属性.

以下代码执行相同的操作:

<input type="number" min="-999" max="9999"/>

Answer 6

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

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

Answer 7

我写了一个小而干净的解决方法。使用这个函数将使其正常工作，因为它应该

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

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

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

Answer 8

以下代码将允许用户：

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

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

Answer 9

我曾经遇到过同样的问题，并且根据我的需求找到了这种解决方案。这可能会有所帮助。

<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;"
/>

快乐编码:)

Answer 10

对于 React 用户，

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

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

Answer 11

尝试使用电话：

 maxlength="5" type="tel"

Answer 12

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

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

Answer 13

Chrome（技术上是 Blink）不会为<input type="number">.

HTML5 规范规定maxlength 仅适用于文本、url、电子邮件、搜索、电话和密码类型。

Answer 14

这是我使用 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);
});

我希望它对某人有帮助。

Answer 15

<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

Answer 16

这段代码对我有用

<form method="post">
      <label for="myNumber">My Number:</label>
      <input type="number" maxlength="9" required
      oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" >
     <br><br>
      <input type="submit" value="Submit">
</form>

Answer 17

您也可以尝试使用具有长度限制的数字输入

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

Answer 18

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

<input type="text" oninput="numberOnly(this.id);" class="test_css" 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);
    // Use numbers only pattern, from 0 to 9
    var regex = /[^0-9]/gi;
    // This removes any other character but numbers as entered by user
    element.value = element.value.replace(regex, "");
}

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

Answer 19

尝试这个，

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

Answer 20

如果您想在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);
  }
};