Làm cách nào tôi có thể giới hạn các đầu vào có thể có trong phần tử số HTML5 HTML5?

Đối với <input type="number">phần tử, maxlengthkhông hoạt động. Làm thế nào tôi có thể hạn chế các maxlengthyếu tố số đó?

Và bạn có thể thêm một maxthuộc tính sẽ chỉ định số cao nhất có thể mà bạn có thể chèn

<input type="number" max="999" />

nếu bạn thêm cả a maxvà một mingiá trị, bạn có thể chỉ định phạm vi của các giá trị được phép:

<input type="number" min="1" max="999" />

Ở trên vẫn sẽ không ngăn người dùng nhập thủ công một giá trị ngoài phạm vi được chỉ định. Thay vào đó, anh ta sẽ được hiển thị một cửa sổ bật lên bảo anh ta nhập một giá trị trong phạm vi này khi gửi biểu mẫu như trong ảnh chụp màn hình này:

Bạn có thể xác định minvà maxthuộc tính, mà sẽ cho phép đầu vào chỉ trong một phạm vi nhất định.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

Điều này chỉ hoạt động cho các nút điều khiển spinner, tuy nhiên. Mặc dù người dùng có thể nhập số lớn hơn mức cho phép max, biểu mẫu sẽ không gửi.

^{Ảnh chụp màn hình được lấy từ Chrome 15}

Bạn có thể sử dụng oninputsự kiện HTML5 trong JavaScript để giới hạn số lượng ký tự:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

Nếu bạn đang tìm kiếm một Web di động giải pháp mà bạn muốn người dùng của mình nhìn thấy bàn phím số thay vì bàn phím toàn văn. Sử dụng loại = "tel". Nó sẽ hoạt động với maxlength giúp bạn tiết kiệm việc tạo thêm javascript.

Max và Min vẫn sẽ cho phép người dùng Nhập số vượt quá max và min, không tối ưu.

Bạn có thể kết hợp tất cả những thứ như thế này:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>

Cập nhật:
Bạn cũng có thể muốn ngăn bất kỳ ký tự không phải là số nào được nhập, bởi vì object.lengthđó sẽ là một chuỗi trống cho các đầu vào số, và do đó độ dài của nó sẽ là 0. Do đó,maxLengthCheck chức năng sẽ không hoạt động.

Giải pháp:
Xem cái này hay cái này để biết ví dụ.

Bản trình diễn - Xem phiên bản đầy đủ của mã tại đây:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Cập nhật 2: Đây là mã cập nhật: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Cập nhật 3: Xin lưu ý rằng việc cho phép nhập nhiều hơn một dấu thập phân có thể gây rối với giá trị số.

nó rất đơn giản, với một số javascript bạn có thể mô phỏng a maxlength, hãy kiểm tra xem:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

Hoặc nếu giá trị tối đa của bạn là ví dụ 99 và tối thiểu 0, bạn có thể thêm giá trị này vào phần tử đầu vào (giá trị của bạn sẽ được ghi lại bằng giá trị tối đa của bạn, v.v.)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

Sau đó (nếu bạn muốn), bạn có thể kiểm tra xem đầu vào có thực sự là số không

Bạn có thể chỉ định nó dưới dạng văn bản, nhưng chỉ thêm pettern, chỉ khớp với các số:

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

Nó hoạt động hoàn hảo và cả trên thiết bị di động (đã thử nghiệm trên iOS 8 và Android) bật ra bàn phím số.

//For Angular I have attached following snippet.

<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

Nếu bạn sử dụng sự kiện "onkeypress" thì bạn sẽ không gặp phải bất kỳ giới hạn người dùng nào như vậy trong khi phát triển (đơn vị kiểm tra nó). Và nếu bạn có yêu cầu không cho phép người dùng nhập sau giới hạn cụ thể, hãy xem mã này và thử một lần.

Một tùy chọn khác là chỉ cần thêm một trình lắng nghe cho bất cứ điều gì với thuộc tính maxlength và thêm giá trị lát vào đó. Giả sử người dùng không muốn sử dụng một chức năng bên trong mọi sự kiện liên quan đến đầu vào. Đây là một đoạn mã. Bỏ qua mã CSS và HTML, JavaScript là vấn đề quan trọng.

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);

label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }

<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>

Độ dài tối đa sẽ không hoạt động với <input type="number"cách tốt nhất tôi biết là sử dụng oninputsự kiện để giới hạn mức tối đa. Xin vui lòng xem mã dưới đây để thực hiện đơn giản.

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

Hãy nói rằng bạn muốn giá trị tối đa được phép là 1000 - được nhập hoặc bằng công cụ quay vòng.

Bạn hạn chế các giá trị spinner bằng cách sử dụng: type="number" min="0" max="1000"

và hạn chế những gì được gõ bằng bàn phím bằng javascript: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

Như đã nói bởi những người khác, min / max không giống như maxlength vì mọi người vẫn có thể nhập một số float lớn hơn độ dài chuỗi tối đa mà bạn dự định. Để thực sự mô phỏng thuộc tính maxlength, bạn có thể làm một cái gì đó như thế này trong một nhúm (điều này tương đương với maxlength = "16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

Câu trả lời của Maycow Moura là một khởi đầu tốt. Tuy nhiên, giải pháp của anh ta có nghĩa là khi bạn nhập chữ số thứ hai, tất cả việc chỉnh sửa trường sẽ dừng lại. Vì vậy, bạn không thể thay đổi giá trị hoặc xóa bất kỳ ký tự.

Đoạn mã sau dừng ở mức 2, nhưng cho phép tiếp tục chỉnh sửa;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

Tôi đã gặp vấn đề này trước đây và tôi đã giải quyết nó bằng cách sử dụng kết hợp loại số html5 và jQuery.

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

kịch bản:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

Tôi không biết nếu các sự kiện là một chút quá mức nhưng nó đã giải quyết vấn đề của tôi. Thư viện

Đầu vào HTML

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

một cách đơn giản để đặt maxlength cho đầu vào số là:

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

Như với type="number", bạn chỉ định một maxthay vì thuộc maxlengthtính, đó là số lượng tối đa có thể có. Vì vậy, với 4 chữ số, maxnên là 9999, 5 chữ số 99999và như vậy.

Ngoài ra nếu bạn muốn chắc chắn rằng đó là một số dương, bạn có thể đặt min="0", đảm bảo các số dương.

Ừ Giống như ai đó đã bỏ cuộc giữa chừng khi thực hiện nó và nghĩ rằng sẽ không có ai chú ý.

Vì lý do nào, các câu trả lời ở trên không sử dụng các thuộc tính minvà max. JQuery này kết thúc nó:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

Nó có thể cũng hoạt động như một hàm có tên "oninput" w / o jQuery nếu một trong những loại "jQuery-is-the-devil" của bạn.

Như tôi đã phát hiện ra bạn không thể sử dụng bất kỳ onkeydown, onkeypresshoặc onkeyupcác sự kiện cho một giải pháp hoàn chỉnh bao gồm các trình duyệt di động. Nhân tiện, onkeypresskhông được dùng nữa và không còn xuất hiện trong chrome / opera cho android (xem: Sự kiện UI Bản thảo làm việc W3C, ngày 04 tháng 8 năm 2016 ).

Tôi đã tìm ra một giải pháp chỉ sử dụng oninputsự kiện này. Bạn có thể phải thực hiện kiểm tra số bổ sung theo yêu cầu, chẳng hạn như dấu âm / dương hoặc số thập phân và hàng nghìn dấu phân cách và tương tự nhưng khi bắt đầu, những điều sau đây sẽ đủ:

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

Tôi cũng khuyên bạn nên kết hợp maxlengthvới minvà maxđể ngăn chặn việc gửi sai như đã nêu ở trên nhiều lần.

<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

hoặc nếu bạn muốn không thể nhập gì

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

Bạn cũng có thể thử điều này cho đầu vào số với giới hạn độ dài

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

Tôi biết đã có câu trả lời, nhưng nếu bạn muốn đầu vào của mình hoạt động chính xác như maxlengththuộc tính hoặc gần nhất có thể, hãy sử dụng mã sau:

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

Các thuộc tính có liên quan hơn để sử dụng sẽ là minvà max.

Điều này có thể giúp một người nào đó.

Với một ít javascript, bạn có thể tìm kiếm tất cả các đầu vào datetime-local, tìm kiếm nếu năm mà người dùng đang cố gắng nhập, lớn hơn 100 năm trong tương lai:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });