ความยาวสูงสุดที่ละเว้นสำหรับการป้อนข้อมูล type =“ number” ใน Chrome

แอตทริบิวต์ไม่ได้ทำงานกับmaxlength <input type="number">สิ่งนี้เกิดขึ้นเฉพาะใน Chrome

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

จากเอกสารของ MDN สำหรับ<input>

ถ้าค่าของประเภทแอตทริบิวต์text, email, search, password, telหรือurlแอตทริบิวต์นี้ระบุจำนวนสูงสุดของตัวละคร (ในจุดรหัส Unicode) ที่ผู้ใช้สามารถป้อน; สำหรับประเภทการควบคุมอื่น ๆ จะถูกละเว้น

ดังนั้นmaxlengthจะถูกละเว้น<input type="number">โดยการออกแบบ

ทั้งนี้ขึ้นอยู่กับความต้องการของคุณคุณสามารถใช้minและmaxแอตทริบิวต์เป็นinonแนะ / คำตอบของเขาและเธอ (หมายเหตุ: นี้จะกำหนดช่วง จำกัด ไม่ยาวตัวอักษรที่แท้จริงของค่าแม้ว่า -9,999-9999 จะครอบคลุมทุก 0-4 ตัวเลขหลัก) หรือคุณสามารถใช้การป้อนข้อความปกติและบังคับใช้การตรวจสอบความถูกต้องบนฟิลด์ด้วยpatternแอตทริบิวต์ใหม่:

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

ความยาวสูงสุดจะไม่ทำงานด้วย<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"
 />

มีหลายคนโพสต์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;" />

ฉันมีสองวิธีที่คุณทำเช่นนั้น

ครั้งแรก: ใช้type="tel"มันจะทำงานเหมือนtype="number"ในอุปกรณ์พกพาและยอมรับความยาวสูงสุด:

<input type="tel" />

ที่สอง: ใช้ JavaScript เล็กน้อย:

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

คุณสามารถใช้แอตทริบิวต์minและmax

รหัสต่อไปนี้ทำเช่นเดียวกัน:

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

เปลี่ยนประเภทอินพุตของคุณเป็นข้อความและใช้เหตุการณ์ "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

ฉันเคยเจอปัญหาเดียวกันและพบวิธีแก้ปัญหานี้ตามความต้องการของฉัน มันอาจช่วยบางคน

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

Happy Coding :)

คุณสามารถลองใช้วิธีนี้เช่นกันสำหรับการป้อนตัวเลขด้วยการจำกัดความยาว

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

<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

นี่คือโซลูชันของฉันกับ 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);
});

ฉันหวังว่ามันจะช่วยให้ใครบางคน

จากประสบการณ์ของฉันปัญหาส่วนใหญ่ที่ผู้คนถามว่าทำไม maxlengthถูกเพิกเฉยก็เพราะผู้ใช้สามารถป้อนข้อมูลได้มากกว่าจำนวนอักขระที่ "อนุญาต"

ตามที่ความคิดเห็นอื่นได้ระบุไว้type="number"อินพุตไม่มีmaxlengthแอตทริบิวต์และมีminและmaxททริบิว

หากต้องการให้ฟิลด์ จำกัด จำนวนอักขระที่สามารถแทรกได้ในขณะที่อนุญาตให้ผู้ใช้รับทราบสิ่งนี้ก่อนที่จะส่งแบบฟอร์ม (เบราว์เซอร์ควรระบุค่า> สูงสุดเป็นอย่างอื่น) คุณจะต้อง (ตอนนี้อย่างน้อย) เพิ่ม ฟังสนาม

นี่เป็นวิธีแก้ปัญหาที่ฉันเคยใช้ในอดีต: http://codepen.io/wuori/pen/LNyYBM

ฉันรู้ว่ามีคำตอบอยู่แล้ว แต่หากคุณต้องการให้อินพุตของคุณทำงานเหมือนกับ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();

โครเมี่ยม (เทคนิค, Blink) จะไม่ใช้ maxlength<input type="number">สำหรับ

ข้อมูลจำเพาะ HTML5บอกว่า maxlength ใช้ได้กับข้อความประเภท url อีเมลการค้นหา tel และรหัสผ่านเท่านั้น

ทางออกที่สมบูรณ์แบบที่ฉันเพิ่งลองไปคือ:

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

ฉันจะทำให้เร็วและเข้าใจง่าย!

แทนที่จะ maxlength สำหรับtype='number'(maxlength จะหมายถึงการกำหนดจำนวนเงินสูงสุดของตัวอักษรสำหรับสตริงในที่textพิมพ์), การใช้งานและmin=''max=''

ไชโย

<input type="number"> เป็นเพียงว่า ... การป้อนตัวเลข (แม้ว่าจะไม่ได้เปลี่ยนจากสตริงเพื่อลอยผ่าน Javascript)

ฉันเดาว่ามันไม่ได้ จำกัด ตัวอักษรในการป้อนข้อมูลที่สำคัญโดยmaxLengthมิฉะนั้นผู้ใช้ของคุณอาจติดอยู่ใน "กับดักที่สำคัญ" ถ้าพวกเขาลืมทศนิยมที่จุดเริ่มต้น (ลองวาง.ที่ดัชนี1เมื่อ<input type"text">attr "maxLength" แล้ว ) อย่างไรก็ตามมันจะตรวจสอบความถูกต้องในแบบฟอร์มการส่งถ้าคุณตั้งค่าmaxคุณลักษณะ

หากคุณพยายาม จำกัด / ตรวจสอบหมายเลขโทรศัพท์ให้ใช้type="tel"attr / value มันเป็นไปตามmaxLengthattr และแสดงแป้นพิมพ์หมายเลขโทรศัพท์มือถือเท่านั้น (ในเบราว์เซอร์ที่ทันสมัย) และคุณสามารถ จำกัด การป้อนข้อมูลให้กับรูปแบบ (เช่นpattern="[0-9]{10}")

สำหรับผู้ใช้ตอบโต้

เพียงแทนที่ 10 ด้วยความยาวสูงสุดของคุณ

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

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