home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

อินพุต HTML DOM ค้นหาคุณสมบัติ defaultValue

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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์การตั้งค่าคุณสมบัติ defaultValue -

searchObject.defaultValue = value

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

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input Search defaultValue Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>
<p>Change the above search field default value by clicking on the CHANGE button</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>

ผลลัพธ์

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

อินพุต HTML DOM ค้นหาคุณสมบัติ defaultValue

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

อินพุต HTML DOM ค้นหาคุณสมบัติ defaultValue

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

ขั้นแรกเราได้สร้าง องค์ประกอบที่มี type=”search”, id=”SEARCH1”, name=”fruits” และมีการตั้งค่าแอตทริบิวต์ค่าเป็น “MANGO” ช่องค้นหาอยู่ในรูปแบบ −

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

จากนั้นเราจะสร้างปุ่ม CHANGE ซึ่งจะรันเมธอด changeDefault() เมื่อผู้ใช้คลิก -

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

เมธอด changeDefault() ใช้เมธอด getElementById() เพื่อรับฟิลด์อินพุตพร้อมการค้นหาประเภทและตั้งค่าคุณสมบัติ defaultValue เป็น “APPLE” จากนั้นเราได้รับคุณสมบัติ defaultValue ของอินพุตด้วยการค้นหาประเภทอีกครั้งโดยใช้เมธอด getElementById() และกำหนดให้กับตัวแปร P ตัวแปรนี้จะแสดงในย่อหน้าด้วย id "ตัวอย่าง" โดยใช้คุณสมบัติ 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 ;
}