Membatasi text yang ditampilkan html

Untuk elemen <input type="number">, maxlength tidak berfungsi. Bagaimana saya bisa membatasi maxlength untuk elemen angka itu?

Dan Anda dapat menambahkan atribut max yang akan menentukan jumlah tertinggi yang dapat Anda masukkan

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

jika Anda menambahkan nilai max dan min Anda dapat menentukan rentang nilai yang diizinkan:

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

Di atas masih akan tidak 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 min dan 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 max yang diizinkan, formulir tidak akan mengirimkan. 

Anda dapat menggunakan acara HTML5 oninput di 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.

Max 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.length akan menjadi string kosong untuk input angka, dan karenanya panjangnya akan menjadi 0. Dengan demikian fungsi maxLengthCheck tidak akan berfungsi.

Larutan:
Lihat ini atau ini untuk 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 mengizinkan 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>
  <h2>You entered: {{number}}</h2>
</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.

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

Panjang maks tidak akan bekerja dengan <input type="number" cara terbaik yang saya tahu adalah menggunakan oninput acara untuk membatasi panjang maksimum 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"
 />

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

Pilihan lain adalah hanya menambahkan pendengar untuk apa pun dengan atribut maxlength dan menambahkan nilai slice ke sana. 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>

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

Anda dapat mencoba ini juga untuk input numerik dengan batasan panjang

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

cara sederhana untuk mengatur panjang maksimum untuk input angka adalah:

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

Seperti halnya type="number", Anda menentukan properti max bukannya maxlength, yang merupakan jumlah maksimum yang dimungkinkan. Jadi dengan 4 digit, max harus 9999, 5 digit 99999 dan sebagainya.

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

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

  });

Seperti yang saya ketahui, Anda tidak dapat menggunakan acara onkeydown, onkeypress atau onkeyup untuk solusi lengkap termasuk browser seluler. Ngomong-ngomong onkeypress sudah usang dan tidak ada lagi di chrome/opera untuk Android (lihat: Acara UI W3C Working Draft, 04 Agustus 2016 ).

Saya menemukan solusi hanya dengan menggunakan oninput event . 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 merekomendasikan untuk menggabungkan maxlength dengan min dan max untuk mencegah kiriman yang salah seperti yang disebutkan di atas beberapa kali.

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 min dan 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));
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value));
    });

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

Saya tahu sudah ada jawaban, tetapi jika Anda ingin input Anda berperilaku persis seperti atribut maxlength 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();

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

Cukup tulis ini ...

<input type="text" onkeypress="return event.target.value.length < 13"  placeholder="Enter Identity card number" class="form-control">

Untuk siapa yang mencari batasan global seperti saya:

$(document).on('keypress','input[type="number"][maxlength]', function(){
    return this.value.length < +this.attributes.maxlength.value;
});

Ini menangkap setiap penekanan tombol pada dokumen, dan memfilternya jika input adalah input "angka" dan memiliki atribut maxlength. Kemudian memungkinkan tombol yang ditekan ketika panjangnya tidak mencapai maxlength. Ia juga bekerja dengan input dan modem yang ditambahkan secara dinamis, dll.

Atribut yang lebih relevan untuk digunakan adalah min dan max.