คุณสมบัติเติมข้อความอัตโนมัติของแบบฟอร์ม HTML DOM เชื่อมโยงกับแอตทริบิวต์เติมข้อความอัตโนมัติขององค์ประกอบแบบฟอร์ม การใช้คุณสมบัติเติมข้อความอัตโนมัติ เราสามารถตั้งค่าหรือคืนค่าแอตทริบิวต์การเติมข้อความอัตโนมัติของแบบฟอร์มที่กำหนดได้ คุณสมบัตินี้ระบุว่าฟิลด์อินพุตควรเติมข้อความอัตโนมัติที่ผู้ใช้เขียนโดยอิงตามข้อความที่เคยเขียนในฟิลด์ข้อความหรือไม่
คุณสมบัติการเติมข้อความอัตโนมัติสามารถปิดได้สำหรับช่องป้อนข้อมูลเฉพาะ หากตั้งค่าการเติมข้อความอัตโนมัติไว้สำหรับแบบฟอร์มและจะเป็นจริงสำหรับในทางกลับกันด้วย
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
ตั้งค่าคุณสมบัติเติมข้อความอัตโนมัติ -
formObject.autocomplete = on|off
ในที่นี้ “เปิด” เป็นค่าเริ่มต้น และเบราว์เซอร์พยายามเติมค่าผู้ใช้โดยอัตโนมัติตามข้อความก่อนหน้า การตั้งค่าเป็นปิดหมายความว่าเบราว์เซอร์จะไม่ป้อนข้อมูลของผู้ใช้ให้สมบูรณ์ และผู้ใช้ต้องพิมพ์ค่าเอง
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติเติมข้อความอัตโนมัติ -
<!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 และพิมพ์ข้อความในช่องชื่อผู้ใช้ -
ในตัวอย่างข้างต้น −
เราได้สร้างแบบฟอร์มด้วย id="Form1" และตั้งค่าการเติมข้อความอัตโนมัติเป็น "ปิด" ซึ่งหมายความว่าผู้ใช้จะต้องพิมพ์ค่าเองโดยไม่ได้รับความช่วยเหลือจากเว็บเบราว์เซอร์เพื่อเติมข้อความนี้โดยอัตโนมัติ แบบฟอร์มประกอบด้วยช่องข้อความและช่องรหัสผ่านด้วย -
<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() และตั้งค่าคุณสมบัติเติมข้อความอัตโนมัติเป็น "เปิด" จาก "ปิด" การใช้คุณสมบัติ innerHTML ของย่อหน้าที่มีรหัส "ตัวอย่าง" เราจะแสดงการเปลี่ยนแปลงนี้โดยแสดงข้อความให้ผู้ใช้เห็น -
function changeAuto() {
document.getElementById("FORM1").autocomplete = "on";
document.getElementById("Sample").innerHTML = "The input text will now be autocomplete ";
} 