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

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

ไวยากรณ์ (Syntax)

การดึงค่า (คืนค่า string)

inputEmailObject.defaultValue

การกำหนดค่า defaultValue

inputEmailObject.defaultValue = 'string'

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการรีเซ็ตค่าอีเมลกลับไปเป็นค่าเริ่มต้น (defaultValue):

<!DOCTYPE html>
<html>
<head>
<title>Input Email defaultValue</title>
<style>
  form { width:70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin:5px; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>Email-defaultValue</legend>
    <label for="EmailSelect">User Email : <input type="email" id="EmailSelect" value="xyz@abc.com"> </label>
    <input type="button" onclick="getDefaultValue()" value="Reset Default Value">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputEmail = document.getElementById("EmailSelect");
  divDisplay.textContent = 'defaultValue: ' + inputEmail.defaultValue;
  function getDefaultValue() {
    var currentValue = inputEmail.value;
    divDisplay.textContent = 'Value - ' + inputEmail.value + ' resets to - ' + inputEmail.defaultValue;
    inputEmail.value = inputEmail.defaultValue;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: แสดง defaultValue เริ่มต้น (xyz@abc.com) เมื่อเปลี่ยนอีเมล: value จะเปลี่ยนแต่ defaultValue คงเดิม หลังคลิกปุ่ม Reset Default Value: value จะกลับมาเป็น defaultValue อีกครั้ง

ประโยชน์: ใช้สำหรับฟีเจอร์ "Reset" หรือ "Clear Form" ให้กลับสู่ค่าเดิมได้ง่าย