HTML DOM Input ค้นหาคุณสมบัติการเติมข้อความอัตโนมัติ

คุณสมบัติเติมข้อความอัตโนมัติของการค้นหาอินพุต HTML DOM เชื่อมโยงกับแอตทริบิวต์เติมข้อความอัตโนมัติขององค์ประกอบ ที่มีประเภท=”ค้นหา” แอตทริบิวต์เติมข้อความอัตโนมัติใช้ค่า "เปิด" หรือ "ปิด" ค่า on ระบุว่าเว็บเบราว์เซอร์ต้องกรอกข้อความของผู้ใช้โดยอัตโนมัติโดยอิงจากอินพุตก่อนหน้าในขณะที่ตั้งค่าเป็นเท็จ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติเติมข้อความอัตโนมัติ -

searchObject.autocomplete = "on|off"

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

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติการเติมข้อความอัตโนมัติของ Input Search -

<!DOCTYPE html>
<html>
<body>
<h1>Input Search autocomplete property</h1>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>
<p>Off the autocomplete in the above search field by clicking on the below button</p>
<button onclick="changeAuto()">Autocomplete Off</button>
<p id="Sample"></p>
<script>
   function changeAuto() {
      document.getElementById("SEARCH1").autocomplete = "off";
      document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM Input ค้นหาคุณสมบัติการเติมข้อความอัตโนมัติ

เมื่อพิมพ์ข้อความในช่องด้านบน คุณจะเห็นการเติมข้อความอัตโนมัติตามข้อมูลที่คุณป้อนก่อนหน้านี้ -

HTML DOM Input ค้นหาคุณสมบัติการเติมข้อความอัตโนมัติ

เมื่อคลิกปุ่ม "ปิดการเติมข้อความอัตโนมัติ" ระบบจะไม่บันทึกข้อความเติมข้อความอัตโนมัติ -

HTML DOM Input ค้นหาคุณสมบัติการเติมข้อความอัตโนมัติ

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

ขั้นแรกเราได้สร้าง องค์ประกอบที่มี type=”search”, name=”fruits” และตั้งค่าแอตทริบิวต์เติมข้อความอัตโนมัติเป็นเปิด เพื่อให้แน่ใจว่าข้อความจะสมบูรณ์ตามข้อมูลที่เราป้อนไว้ก่อนหน้านี้ ช่องค้นหาอยู่ในแบบฟอร์มที่มีปุ่มส่งสำหรับส่งข้อมูลแบบฟอร์มไปยังเซิร์ฟเวอร์ -

<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>

จากนั้นเราจะสร้างปุ่ม "ปิดการเติมข้อความอัตโนมัติ" ที่จะรันเมธอด changeAuto() เมื่อผู้ใช้คลิก -

<button onclick="changeAuto()">Autocomplete Off</button>

เมธอด changeAuto() รับ องค์ประกอบที่มีประเภท "ค้นหา" โดยใช้เมธอด getElementById() และตั้งค่าแอตทริบิวต์การเติมข้อความอัตโนมัติเป็นปิด ซึ่งหมายความว่าข้อความจะไม่ถูกเติมข้อความอัตโนมัติในขณะนี้ และผู้ใช้จะต้องพิมพ์ข้อความที่สมบูรณ์ด้วยตนเอง จากนั้นเราจะแสดงข้อความเกี่ยวกับการเปลี่ยนแปลงนี้ในย่อหน้าด้วยรหัส "ตัวอย่าง" โดยใช้คุณสมบัติ innerHTML -

function changeAuto() {
   document.getElementById("SEARCH1").autocomplete = "off";
   document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}