คุณสมบัติ maxLength ของ HTML DOM Input Search

คุณสมบัติ maxLength ของ HTML DOM Input Search ใช้สำหรับตั้งค่าหรือส่งคืนแอตทริบิวต์ maxlength ของช่องค้นหา input คุณสมบัติ maxLength ระบุจำนวนตัวอักษรสูงสุดที่สามารถพิมพ์ในช่องค้นหาได้

ไวยากรณ์

ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ maxLength:

passwordObject.maxLength = integer

ที่นี่ integer ระบุจำนวนตัวอักษรสูงสุดที่สามารถป้อนในช่องค้นหาได้ ค่าเริ่มต้นคือ 524288

ตัวอย่าง

มาดูตัวอย่างสำหรับคุณสมบัติ maxLength:

<!DOCTYPE html> <html> <body> <h1>Input Search maxLength Property</h1> <form> FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5"> </form> <p>เพิ่มจำนวนตัวอักษรสูงสุดสำหรับช่องค้นหาด้านบนโดยคลิกปุ่มด้านล่าง</p> <button onclick="changeMax()">CHANGE LENGTH</button> <p id="Sample"></p> <script>    function changeMax() {       document.getElementById("SEARCH1").maxLength = "15";       document.getElementById("Sample").innerHTML = "Maximum number of characters are increased to 15";    } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อคลิก CHANGE LENGTH:

ในตัวอย่างข้างต้น:

เราสร้างองค์ประกอบ <input> ที่มี type=”search” id=”SEARCH1” name=”fruits” และแอตทริบิวต์ maxlength ตั้งเป็น 5 แอตทริบิวต์ maxlength ระบุว่าสามารถมีได้แค่ 5 ตัวอักษรในช่องค้นหานั้น ช่องค้นหาอยู่ในฟอร์ม:

<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5"> </form>

เราสร้างปุ่ม CHANGE LENGTH ที่จะเรียกใช้เมธอด changeMax() เมื่อผู้ใช้คลิก:

<button onclick="changeMax()">CHANGE LENGTH</button>

เมธอด changeMax() ใช้ getElementById() เพื่อดึงช่อง input type search และตั้งค่า maxLength property เป็น 15 แล้วแสดงข้อความในย่อหน้าที่มี id “Sample” โดยใช้ innerHTML:

function changeMax() {    document.getElementById("SEARCH1").maxLength = "15";    document.getElementById("Sample").innerHTML = "Maximum number of characters are now increased to 15"; }