คุณสมบัติ autocomplete ของ HTML DOM Form

คุณสมบัติ autocomplete ของ HTML DOM Form เกี่ยวข้องกับแอตทริบิวต์ autocomplete ขององค์ประกอบ form โดยใช้คุณสมบัติ autocomplete เราสามารถตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ autocomplete ของฟอร์มที่กำหนด คุณสมบัตินี้ระบุว่าช่อง input ควรทำให้ข้อความที่ผู้ใช้พิมพ์สมบูรณ์โดยอัตโนมัติตามข้อความที่เคยพิมพ์ในช่องนั้นหรือไม่

คุณสมบัติ autocomplete สามารถปิดได้สำหรับช่อง input เฉพาะถ้า autocomplete เปิดอยู่สำหรับฟอร์ม และ vice-versa ก็ได้เช่นกัน

ไวยากรณ์

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

formObject.autocomplete = on|off

ที่นี่ “on” เป็นค่าเริ่มต้นและเบราว์เซอร์พยายามทำให้ค่าของผู้ใช้สมบูรณ์ตามข้อความก่อนหน้า การตั้งเป็น off หมายถึงเบราว์เซอร์จะไม่ทำให้ข้อมูลผู้ใช้สมบูรณ์และผู้ใช้ต้องพิมพ์ค่าเอง

ตัวอย่าง

มาดูตัวอย่างของคุณสมบัติ autocomplete:

<!DOCTYPE html> <html> <head> <style>    form{       border:2px solid blue;       margin:2px;       padding:4px;    } </style> <script>    function changeAuto() {       document.getElementById("FORM1").autocomplete = "on";       document.getElementById("Sample").innerHTML = "The input text will now be autocomplete ";    } </script> </head> <body> <h1>Form autocomplete property example</h1> <form id="FORM1" autocomplete="off"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Password <input type="password" name="pass"></label> </form> <br> <button onclick="changeAuto()">CHANGE</button> <p id="Sample"></p> </body> </html>

ผลลัพธ์

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

เมื่อคลิกปุ่ม CHANGE และพิมพ์ข้อความในช่อง User Name:

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

เราสร้างฟอร์มที่มี id=“Form1” และ autocomplete=“off” หมายถึงผู้ใช้ต้องพิมพ์ค่าเองโดยไม่มีช่วยเหลือจากเบราว์เซอร์ ฟอร์มมีช่องข้อความและช่องรหัสผ่าน:

<form id="FORM1" autocomplete="off"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Password <input type="password" name="pass"></label> </form>

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

<button onclick="changeAuto()">CHANGE</button>

เมธอด changeAuto() ดึงองค์ประกอบฟอร์มโดยใช้ getElementById() และตั้งค่า autocomplete เป็น “on” จาก “off” ใช้ innerHTML ของย่อหน้าที่มี id “Sample” แสดงการเปลี่ยนแปลง:

function changeAuto() {    document.getElementById("FORM1").autocomplete = "on";    document.getElementById("Sample").innerHTML = "The input text will now be autocomplete "; }