maxlength属性对<input type="number">不起作用。这只发生在Chrome。

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

当前回答

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

其他回答

这也适用于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

对于React用户,

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

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

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

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

输入类型文本和oninput事件与regex只接受数字为我工作。

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

最大长度-输入类型文本

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

使用jQuery:

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

最大输入类型号

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