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

คุณสมบัติ defaultValue ของ HTML DOM Input Number ใช้สำหรับคืนค่าและเปลี่ยนแปลงค่าเริ่มต้นของช่องป้อนข้อมูลประเภท type="number" ในเอกสาร HTML

รูปแบบไวยากรณ์ (Syntax)

• การคืนค่าค่าเริ่มต้น

object.defaultValue

• การเปลี่ยนแปลงค่าเริ่มต้น

object.defaultValue=”number”

ตัวอย่าง

ตัวอย่างการใช้งานคุณสมบัติ defaultValue ของ HTML DOM Input Number:

<!DOCTYPE html> <html> <head> <style>    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    input{       width:35%;       border:2px solid #fff;       background-color:transparent;       color:#fff;       font-weight:bold;       padding:8px;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:35%;       margin:2rem auto;       display:block;       color:#fff;       outline:none;       cursor:pointer;    }    .show{       font-size:1.5rem;       font-weight:bold;    } </style> </head> <body> <h1>ตัวอย่าง DOM Input number defaultValue</h1> <p>สวัสดีครับ ป้อนวันเกิดของคุณ</p> <input type="number" class="numberInput"> <button onclick="changeValue()" class="btn">ส่งข้อมูล</button> <div class="show"></div> <script>    function changeValue() {       var numberInput = document.querySelector(".numberInput");       var showMsg = document.querySelector(".show");       numberInput.defaultValue = "20";       numberInput.value= numberInput.defaultValue;       showMsg.innerHTML ="จ้าจ้า! ผมเปลี่ยนวันเกิดของคุณเป็นของผมแล้ว!";    } </script> </body> </html>

ผลลัพธ์

โค้ดด้านบนจะให้ผลลัพธ์ดังนี้:

ป้อนวันเกิดของคุณ แล้วคลิกปุ่ม 「ส่งข้อมูล」 เพื่อเปลี่ยนค่าเป็นค่าเริ่มต้น