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

Question

maxlength属性无法与<input type="number">一起使用。这只发生在Chrome中。

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

Answer 1

来自MDN's documentation for <input>

  

如果类型属性的值为text，email，search，password，tel或{ {1}}，此属性指定用户可以输入的最大字符数（以Unicode代码点为单位）;对于其他控件类型，它将被忽略。

因此url设计会忽略maxlength。

根据您的需要，您可以将<input type="number">和min属性用作他/她答案中建议的 inon （注意：这只会定义一个约束范围，不是值的实际字符长度，但-9999到9999将覆盖所有0-4位数字），或者您可以使用常规文本输入并使用新的pattern属性对字段执行验证：

max

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

您可以使用 min 和 max 属性。

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

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

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

许多人发布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;" />，而且效果非常好。

以下是工作代码：

{{1}}

Answer 6

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

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

这是我的jQuery解决方案...... 您必须将maxlength添加到输入类型=数字

$('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 8

将输入类型更改为文本并使用“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 9

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

DEMO - JSFIDDLE

Answer 10

尝试一下，

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

Answer 11

完成！仅数字和最大长度工作完美。

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

Answer 12

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

  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 13

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

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

Answer 14

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

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

要让字段限制可以插入的字符数，同时允许用户在提交表单之前知道这一点（否则浏览器应该识别值＆gt; max），你必须（现在，在至少）为该字段添加一个监听器。

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

Answer 15

对于React用户，

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

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

Answer 16

我知道已有答案，但如果您希望输入的行为与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();

Answer 17

尝试使用tel：

 maxlength="5" type="tel"

Answer 18

输入类型为“ 最大长度被忽略

是正确的，请参阅文档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;
}

<input type="text" maxlength="4" onkeypress="return onlyNumber(event)">

Answer 19

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

在带有 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);
  }
}

Answer 20

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

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

});

然后您可以像文本类型字段一样使用 maxlength="4"。

Answer 21

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

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

Answer 22

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

void sort_0(int arr[10], int n, int* c){
        int i;
        for(i=0;i<n;i++){
            if(arr[i] == 0){
                (*c)+= 1;
            }
        }
}


int main (void) {
    int size;
    
    printf("Enter array size: ");
    scanf("%d", &size);
    int arr[size];
    for (int i=0;i<size;i++) {
        scanf("%d",&arr[i]);
    }
    
    int c = 0;
    sort_0(arr, size, &c);
    
    printf("C is: %d\n",c);
    int* final_array;
    if ((final_array=malloc(c * sizeof(int)))==NULL) // should always check malloc errors
    { 
        perror("malloc");
        return -1;
    }
    for (int i=0;i<c;i++) {
        final_array[i]= 0;
    }
    
    printf("{");
    for (int i=0;i<c-1;i++) {
        printf("%d,", final_array[i]);
    }
    printf("%d}\n",final_array[c-1]);
    
    return 0;
}

Answer 23

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

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

Answer 24

我可以使用它进行存档。

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

Answer 25

<input type="number">就是……一个数字输入（尽管没有从字符串转换为通过Javascript浮动）。

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

如果您要限制/验证电话号码，请使用max attr / value。它遵循type="tel"属性并仅调出移动电话数字键盘（在现代浏览器中），并且您可以将输入限制为某种模式（即maxLength）。

Answer 26

我将使它变得快速且容易理解！

使用type='number'和text代替min=''的maxlength（maxlength的意思是定义max=''类型的字符串的最大字母数）。 / p>

欢呼

Answer 27

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

df_Filtered <- df_Filtered[ order(df_Filtered$Region, (df_Filtered$Year)) , ]

Answer 28

<input type="number">的Chrome（技术上，闪烁）will not implement maxlength。

The HTML5 specification表示maxlength仅适用于文本，网址，电子邮件，搜索，电话和密码类型。

Answer 29

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