Batasi jumlah karakter yang diperbolehkan dalam bidang teks masukan formulir

Bagaimana cara membatasi atau membatasi pengguna untuk hanya memasukkan maksimal lima karakter ke dalam kotak teks?

Di bawah ini adalah bidang masukan sebagai bagian dari formulir saya:

<input type="text" id="sessionNo" name="sessionNum" />

Apakah itu menggunakan sesuatu seperti maxSize atau sesuatu seperti itu?

maxlength :

Jumlah karakter maksimum yang akan diterima sebagai input. Ini bisa lebih besar dari yang ditentukan oleh SIZE, dalam hal ini bidang akan di-scroll dengan benar. Defaultnya tidak terbatas.

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

Namun, ini mungkin atau mungkin tidak dipengaruhi oleh pawang Anda. Anda mungkin perlu menggunakan atau menambahkan fungsi penangan lain untuk menguji panjangnya juga.

Cara termudah untuk melakukannya:

maxlength="5"

Jadi .. Menambahkan atribut ini ke kontrol Anda:

<input type="text" 
    id="sessionNo" 
    name="sessionNum" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />

Tambahkan yang berikut ini ke header:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
}
</script>

    <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" 
onKeyUp="limitText(this,5);"" />

Menurut w3c , nilai default untuk atribut MAXLENGTH adalah angka yang tidak terbatas. Jadi, jika Anda tidak menentukan jumlah maksimum, pengguna dapat memotong dan menempelkan Alkitab beberapa kali dan menempelkannya di formulir Anda.

Bahkan jika Anda menentukan MAXLENGTH ke angka yang wajar, pastikan Anda memeriksa ulang panjang data yang dikirimkan di server sebelum memproses (menggunakan sesuatu seperti php atau asp) karena cukup mudah untuk mengatasi batasan MAXLENGTH dasar.

<input type="text" maxlength="5">

jumlah huruf maksimal yang bisa di input adalah 5.

Sederhanakan

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

dan gunakan peringatan untuk menunjukkan bahwa karakter maks telah digunakan.

Saya selalu melakukannya seperti ini:

$(document).ready(function(){
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
    maxChars.bind('keyup', function(e){
        length = new Number(maxChars.val().length);
        counter = max_length-length;
        $("#sessionNum_counter").text(counter);
    });
}
});

Memasukkan:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>

Panjang maksimal

Jumlah karakter maksimum yang akan diterima sebagai input. Atribut maxlength menentukan jumlah karakter maksimum yang diperbolehkan dalam elemen.

Maxlength W3 sekolah

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">
</form>

Anda dapat menggunakan <input type = "text" maxlength="9"> atau

<input type = "number" maxlength="9">untuk nomor atau <input type = "email" maxlength="9">untuk validasi email akan muncul

<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}

Gunakan maxlenght = "jumlah karakter"

<input type="text" id="sessionNo" name="sessionNum" maxlenght="7" />

Kode berikut mencakup ...

var count = 1;

do {
    function count_down(obj, count){

    let element = document.getElementById('count'+ count);

    element.innerHTML = 80 - obj.value.length;

    if(80 - obj.value.length < 5){
        element.style.color = "firebrick";
    }else{
        element.style.color = "#333";
    }
}
count++;
} while (count < 20); 

.text-input {
    padding: 8px 16px;
    width: 50%;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    font-family: Raleway;
    border: 1px solid dodgerblue;
  }

<p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80"  class="text-input" name="bikeTitle" ></p>
        <span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>

<input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);"  placeholder="MobileNumber">

<script>
function checkNumber(key) {
  console.log(key);
  var inputNumber = document.querySelector("#MobileNumber").value;
  if(key.key >= 0 && key.key <= 9) {
    inputNumber += key.key;
  }
  else {
    key.preventDefault();
  }
}
</script>