จำกัด จำนวนอักขระที่อนุญาตในช่องป้อนข้อความแบบฟอร์ม

ฉันจะ จำกัด หรือ จำกัด ผู้ใช้ให้ป้อนได้สูงสุดห้าอักขระในกล่องข้อความได้อย่างไร

ด้านล่างนี้เป็นช่องป้อนข้อมูลซึ่งเป็นส่วนหนึ่งของแบบฟอร์มของฉัน:

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

มันใช้อะไรเช่น maxSize หรืออะไรทำนองนั้น?

ความยาวสูงสุด :

จำนวนอักขระสูงสุดที่จะยอมรับเป็นอินพุต ซึ่งอาจมากกว่าที่ระบุโดย SIZE ซึ่งในกรณีนี้ช่องจะเลื่อนอย่างเหมาะสม ค่าเริ่มต้นคือไม่ จำกัด

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

อย่างไรก็ตามสิ่งนี้อาจได้รับหรือไม่ก็ได้รับผลกระทบจากตัวจัดการของคุณ คุณอาจต้องใช้หรือเพิ่มฟังก์ชันตัวจัดการอื่นเพื่อทดสอบความยาวเช่นกัน

วิธีที่ง่ายที่สุด:

maxlength="5"

ดังนั้น .. การเพิ่มแอตทริบิวต์นี้ในการควบคุมของคุณ:

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

เพิ่มสิ่งต่อไปนี้ในส่วนหัว:

<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ค่าเริ่มต้นสำหรับแอตทริบิวต์ MAXLENGTH คือจำนวนที่ไม่ จำกัด ดังนั้นหากคุณไม่ระบุจำนวนสูงสุดผู้ใช้สามารถตัดและวางพระคัมภีร์สองสามครั้งและติดไว้ในแบบฟอร์มของคุณ

แม้ว่าคุณจะระบุ MAXLENGTH เป็นจำนวนที่เหมาะสมให้แน่ใจว่าคุณตรวจสอบความยาวของข้อมูลที่ส่งบนเซิร์ฟเวอร์อีกครั้งก่อนประมวลผล (โดยใช้ php หรือ asp) เนื่องจากมันค่อนข้างง่ายที่จะหลีกเลี่ยงข้อ จำกัด MAXLENGTH พื้นฐาน

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

จำนวนตัวอักษรสูงสุดที่สามารถป้อนได้คือ 5

ทำให้ง่ายขึ้น

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

และใช้การแจ้งเตือนเพื่อแสดงว่ามีการใช้อักขระสูงสุดแล้ว

ฉันมักจะทำเช่นนี้:

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

การป้อนข้อมูล:

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

maxlength

จำนวนอักขระสูงสุดที่จะยอมรับเป็นอินพุต แอตทริบิวต์ maxlength ระบุจำนวนอักขระสูงสุดที่อนุญาตในองค์ประกอบ

โรงเรียน Maxlength W3

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

คุณสามารถใช้ <input type = "text" maxlength="9"> หรือ

<input type = "number" maxlength="9">สำหรับหมายเลขหรือ <input type = "email" maxlength="9">สำหรับการตรวจสอบอีเมลจะปรากฏขึ้น

<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 = "จำนวนแผนภูมิ"

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

รหัสต่อไปนี้มีการนับ ...

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>