Giới hạn số lượng ký tự được phép trong trường văn bản nhập mẫu

Làm cách nào để giới hạn hoặc hạn chế người dùng chỉ nhập tối đa năm ký tự trong hộp văn bản?

Dưới đây là trường đầu vào như một phần của biểu mẫu của tôi:

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

Có phải nó đang sử dụng một cái gì đó như maxSize hoặc một cái gì đó tương tự?

tối đa :

Số lượng ký tự tối đa sẽ được chấp nhận làm đầu vào. Điều này có thể lớn hơn được chỉ định bởi SIZE, trong trường hợp đó, trường sẽ cuộn một cách thích hợp. Mặc định là không giới hạn.

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

Tuy nhiên, điều này có thể hoặc không thể bị ảnh hưởng bởi trình xử lý của bạn. Bạn cũng có thể cần phải sử dụng hoặc thêm một hàm xử lý khác để kiểm tra độ dài.

Cách đơn giản nhất để làm như vậy:

maxlength="5"

Vì vậy, .. Thêm thuộc tính này vào kiểm soát của bạn:

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

Thêm phần sau vào tiêu đề:

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

Theo w3c , giá trị mặc định cho thuộc tính MAXLENGTH là một số không giới hạn. Vì vậy, nếu bạn không chỉ định tối đa người dùng có thể cắt và dán kinh thánh một vài lần và dán nó vào biểu mẫu của bạn.

Ngay cả khi bạn chỉ định MAXLENGTH thành một số hợp lý, hãy đảm bảo bạn kiểm tra kỹ độ dài của dữ liệu đã gửi trên máy chủ trước khi xử lý (sử dụng một cái gì đó như php hoặc asp) vì dù sao cũng khá dễ dàng để vượt qua giới hạn MAXLENGTH cơ bản

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

số lượng chữ cái tối đa có thể có trong đầu vào là 5.

Làm cho nó đơn giản hơn

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

và sử dụng một cảnh báo để cho thấy rằng ký tự tối đa đã được sử dụng.

Tôi luôn luôn làm như thế này:

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

Đầu vào:

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

Tối đa

Số lượng ký tự tối đa sẽ được chấp nhận làm đầu vào. Thuộc tính maxlength chỉ định số lượng ký tự tối đa được phép trong phần tử.

Các trường W3 Maxlength

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

Bạn có thể sử dụng <input type = "text" maxlength="9"> hoặc

<input type = "number" maxlength="9">cho số hoặc <input type = "email" maxlength="9">xác thực email sẽ hiển thị

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

Sử dụng maxlenght = "số lượng charcters"

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

Đoạn mã sau bao gồm một ...

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>