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

คุณสมบัติ defaultValue ของ HTML DOM Input Search ใช้สำหรับตั้งค่าหรือดึง defaultValue ของช่องค้นหา defaultValue ขององค์ประกอบคือค่าที่กำหนดให้แอตทริบิวต์ value ความแตกต่างระหว่างคุณสมบัติ value และ defaultValue คือ defaultValue เก็บค่าเริ่มต้นเดิมไว้ ในขณะที่คุณสมบัติ value เปลี่ยนตามการป้อนข้อมูลของผู้ใช้ในช่องค้นหา

ไวยากรณ์

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

searchObject.defaultValue = value

ที่นี่ “value” คือค่าเริ่มต้นของช่องค้นหา

ตัวอย่าง

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

<!DOCTYPE html> <html> <body> <h1>Input Search defaultValue Property</h1> <form> FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO"> </form> <p>เปลี่ยนค่าเริ่มต้นของช่องค้นหาด้านบนโดยคลิกปุ่ม CHANGE</p> <button type="button" onclick="changeDefault()">CHANGE</button> <p id="Sample"></p> <script>    function changeDefault() {       document.getElementById("SEARCH1").defaultValue="APPLE";       var P=document.getElementById("SEARCH1").defaultValue;       document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;    } </script> </body> </html>

ผลลัพธ์

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

เมื่อคลิกปุ่ม CHANGE:

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

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

<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO"> </form>

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

<button type="button" onclick="changeDefault()">CHANGE</button>

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

function changeDefault() {    document.getElementById("SEARCH1").defaultValue="APPLE";    var P=document.getElementById("SEARCH1").defaultValue;    document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ; }