Form giriş metin alanında izin verilen karakter sayısını sınırlayın

Kullanıcıyı metin kutusuna yalnızca maksimum beş karakter girecek şekilde nasıl sınırlayabilirim veya kısıtlayabilirim?

Formumun bir parçası olarak giriş alanı aşağıdadır:

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

MaxSize veya onun gibi bir şey mi kullanıyor?

maksimum uzunluk :

Giriş olarak kabul edilecek maksimum karakter sayısı. Bu, SIZE ile belirtilenden daha büyük olabilir, bu durumda alan uygun şekilde kaydırılır. Varsayılan, sınırsızdır.

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

Ancak bu, işleyiciniz tarafından etkilenebilir veya etkilenmeyebilir. Uzunluğu test etmek için başka bir işleyici işlevi kullanmanız veya eklemeniz gerekebilir.

Bunu yapmanın en basit yolu:

maxlength="5"

Yani .. Bu özelliği kontrolünüze eklemek:

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

Başlığa aşağıdakileri ekleyin:

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

W3c'ye göre , MAXLENGTH özniteliğinin varsayılan değeri sınırsız sayıdır. Dolayısıyla, maksimum değeri belirtmezseniz, bir kullanıcı İncil'i birkaç kez kesip yapıştırabilir ve formunuza yapıştırabilir.

MAXLENGTH değerini makul bir sayı olarak belirleseniz bile, işlemeden önce (php veya asp gibi bir şey kullanarak) sunucuda gönderilen verilerin uzunluğunu iki kez kontrol ettiğinizden emin olun, çünkü yine de temel MAXLENGTH kısıtlamasını aşmak oldukça kolaydır.

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

girişte olabilecek maksimum harf sayısı 5'tir.

Daha basit hale getirin

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

ve maksimum karakterin kullanıldığını göstermek için bir uyarı kullanın.

Ben her zaman böyle yapıyorum:

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

Giriş:

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

Maksimum uzunluk

Giriş olarak kabul edilecek maksimum karakter sayısı. Maxlength özniteliği, öğede izin verilen maksimum karakter sayısını belirtir.

Maxlength W3 okulları

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

Sen kullanabilirsiniz <input type = "text" maxlength="9"> veya

<input type = "number" maxlength="9">numaralar için veya <input type = "email" maxlength="9">e-posta doğrulaması için görünecek

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

Maxlenght = "karakter sayısı" kullanın

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

Aşağıdaki kod, sayılan ...

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>