Bagaimana saya bisa membatasi kemungkinan input dalam elemen "angka" HTML5?

Untuk <input type="number">elemen, maxlengthtidak berfungsi. Bagaimana saya bisa membatasi maxlengthelemen nomor itu?

Dan Anda dapat menambahkan maxatribut yang akan menentukan angka setinggi mungkin yang dapat Anda masukkan

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

jika Anda menambahkan a maxdan minnilai, Anda dapat menentukan rentang nilai yang diizinkan:

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

Di atas masih tidak akan menghentikan pengguna dari memasukkan nilai secara manual di luar rentang yang ditentukan. Sebagai gantinya, ia akan ditampilkan sembulan yang memberitahukannya untuk memasukkan nilai dalam rentang ini setelah mengirimkan formulir seperti yang ditunjukkan dalam tangkapan layar ini:

Anda dapat menentukan atribut mindan max, yang akan memungkinkan input hanya dalam rentang tertentu.

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

Ini hanya berfungsi untuk tombol kontrol pemintal. Meskipun pengguna mungkin dapat mengetikkan angka yang lebih besar dari yang diizinkan max, formulir tidak akan mengirimkan.

^{Cuplikan layar diambil dari Chrome 15}

Anda dapat menggunakan oninputacara HTML5 dalam JavaScript untuk membatasi jumlah karakter:

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

Jika Anda mencari solusi Web Seluler di mana Anda ingin pengguna Anda melihat papan nomor daripada keyboard teks lengkap. Gunakan type = "tel". Ini akan bekerja dengan maxlength yang menyelamatkan Anda dari membuat javascript tambahan.

Maks dan Min masih akan memungkinkan pengguna untuk Mengetik angka lebih dari maks dan min, yang tidak optimal.

Anda dapat menggabungkan semua ini seperti ini:

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

Pembaruan:
Anda mungkin juga ingin mencegah karakter non-numerik dimasukkan, karena object.lengthakan menjadi string kosong untuk input angka, dan karenanya panjangnya akan menjadi 0. Dengan demikian maxLengthCheckfungsi tidak akan berfungsi.

Solusi:
Lihat ini atau ini sebagai contoh.

Demo - Lihat versi lengkap kode di sini:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Pembaruan 2: Berikut kode pembaruan: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Pembaruan 3: Harap dicatat bahwa memungkinkan lebih dari satu titik desimal dimasukkan dapat mengacaukan nilai angka.

itu sangat sederhana, dengan beberapa javascript Anda dapat mensimulasikan maxlength, periksa:

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

Atau jika nilai maks Anda misalnya 99 dan minimum 0, Anda dapat menambahkan ini ke elemen input (nilai Anda akan ditulis ulang oleh nilai maks Anda, dll.)

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

Kemudian (jika Anda mau), Anda dapat memeriksa apakah input benar-benar angka

Anda dapat menetapkannya sebagai teks, tetapi menambahkan pettern, yang hanya cocok dengan angka:

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

Ini berfungsi sempurna dan juga pada ponsel (diuji pada iOS 8 dan Android) muncul nomor keyboard.

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

Jika Anda menggunakan acara "onkeypress" maka Anda tidak akan mendapatkan batasan pengguna saat mengembangkan (unit test it). Dan jika Anda memiliki persyaratan yang tidak mengizinkan pengguna untuk masuk setelah batas tertentu, lihat kode ini dan coba sekali.

Pilihan lain adalah dengan hanya menambahkan pendengar untuk apa pun dengan atribut maxlength dan menambahkan nilai slice untuk itu. Dengan asumsi pengguna tidak ingin menggunakan fungsi di dalam setiap peristiwa yang terkait dengan input. Berikut cuplikan kode. Abaikan kode CSS dan HTML, JavaScript yang penting.

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

Panjang max tidak akan bekerja dengan <input type="number"cara terbaik yang saya tahu adalah menggunakan oninputevent untuk membatasi maxlength. Silakan lihat kode di bawah ini untuk implementasi sederhana.

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

Katakanlah Anda ingin nilai maksimum yang dibolehkan adalah 1000 - baik diketik atau dengan pemintal.

Anda membatasi nilai pemintal menggunakan: type="number" min="0" max="1000"

dan batasi apa yang diketik oleh keyboard dengan 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; }">

Seperti yang dinyatakan oleh yang lain, min / max tidak sama dengan maxlength karena orang masih bisa memasukkan float yang akan lebih besar dari panjang string maksimum yang Anda inginkan. Untuk benar-benar meniru atribut maxlength, Anda dapat melakukan sesuatu seperti ini dalam keadaan darurat (ini setara dengan maxlength = "16"):

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

Jawaban Maycow Moura adalah awal yang baik. Namun, solusinya berarti bahwa ketika Anda memasukkan digit kedua semua pengeditan bidang berhenti. Jadi, Anda tidak dapat mengubah nilai atau menghapus karakter apa pun.

Kode berikut berhenti di 2, tetapi memungkinkan pengeditan untuk melanjutkan;

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

Saya punya masalah ini sebelumnya dan saya menyelesaikannya menggunakan kombinasi tipe nomor html5 dan jQuery.

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

naskah:

$("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;
        }
    }
});

Saya tidak tahu apakah kejadiannya sedikit berlebihan tetapi itu menyelesaikan masalah saya. JSfiddle

Input 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;
    }

  });

cara sederhana untuk mengatur panjang maksimum untuk input angka adalah:

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

Seperti halnya type="number", Anda menentukan maxalih - alih maxlengthproperti, yang merupakan jumlah maksimum yang dimungkinkan. Jadi dengan 4 digit, maxseharusnya 9999, 5 digit 99999dan sebagainya.

Juga jika Anda ingin memastikan itu adalah angka positif, Anda dapat mengatur min="0", memastikan angka positif.

Ugh. Ini seperti seseorang menyerah setengah jalan melalui penerapannya dan berpikir tidak ada yang akan memperhatikan.

Untuk alasan apa pun, jawaban di atas tidak menggunakan atribut mindan max. JQuery ini menyelesaikannya:

    $('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);
    });

Mungkin juga akan berfungsi sebagai fungsi bernama "oninput" tanpa jQuery jika salah satu dari tipe "jQuery-is-the-devil" Anda.

Seperti yang saya ketahui, Anda tidak dapat menggunakan salah satu dari onkeydown, onkeypressatau onkeyupacara untuk solusi lengkap termasuk browser seluler. Omong-omong onkeypresssudah usang dan tidak ada lagi di chrome / opera untuk android (lihat: UI Events W3C Working Draft, 04 Agustus 2016 ).

Saya menemukan solusi menggunakan oninputacara saja. Anda mungkin harus melakukan pengecekan angka tambahan seperti yang disyaratkan seperti tanda negatif / positif atau desimal dan ribuan pemisah dan sejenisnya tetapi sebagai permulaan berikut ini sudah cukup:

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

Saya juga akan merekomendasikan untuk menggabungkan maxlengthdengan mindan maxuntuk mencegah pengiriman yang salah sebagaimana dinyatakan di atas beberapa kali.

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

atau jika Anda ingin dapat memasukkan apa pun

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

Anda dapat mencoba ini juga untuk input numerik dengan batasan panjang

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

Saya tahu sudah ada jawaban, tetapi jika Anda ingin input Anda berperilaku persis seperti maxlengthatribut atau sedekat mungkin, gunakan kode berikut:

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

Atribut yang lebih relevan untuk digunakan adalah mindan max.

Ini mungkin membantu seseorang.

Dengan sedikit javascript, Anda dapat mencari semua input datetime-lokal, cari jika tahun pengguna mencoba untuk memasukkan, lebih besar dari 100 tahun di masa depan:

$('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);
      }
    })
  });