คุณสมบัติ HTML DOM Input Password size

คุณสมบัติ size ของ input type="password" ใช้สำหรับตั้งค่าหรือดึงค่าแอตทริบิวต์ size ซึ่งกำหนด ความกว้างของช่องกรอกในหน่วยตัวอักษร ค่าเริ่มต้นคือ 20 ตัวอักษร

ไวยากรณ์ (Syntax)

การตั้งค่า size:

passwordObject.size = number

number คือความกว้างเป็นจำนวนตัวอักษร (ค่าเริ่มต้น 20)

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ size ของ Input Password</h1>
รหัสผ่าน: <input type="password" id="PASS1">
<p>คลิกปุ่มเพื่อเพิ่มความกว้างช่องรหัสผ่าน</p>
<button onclick="changeSize()">เปลี่ยนขนาด</button>
<p id="Sample"></p>
<script>
  function changeSize() {
    document.getElementById("PASS1").size += 20;
    var s = document.getElementById("PASS1").size;
    document.getElementById("Sample").innerHTML = "ความกว้างช่องรหัสผ่านตอนนี้คือ: " + s;
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: ช่องรหัสผ่านกว้าง 20 ตัวอักษร (ค่าเริ่มต้น)

คลิก "เปลี่ยนขนาด": ความกว้างเพิ่มขึ้น 20 ตัวอักษร (รวม 40) และแสดงค่าใหม่

คำอธิบายโค้ด

• ช่องรหัสผ่าน id="PASS1" ไม่มี size attribute — ใช้ค่าเริ่มต้น 20
• ปุ่ม "เปลี่ยนขนาด" เรียก changeSize()
• .size += 20 เพิ่มค่า size ขึ้น 20
• ดึงค่า .size ใหม่มาแสดง

หมายเหตุ: คุณสมบัติ size กำหนดความกว้างแบบประมาณ (ขึ้นอยู่กับฟอนต์) สำหรับควบคุมขนาดแม่นยำ ควรใช้ CSS width แทน (เช่น style="width: 300px")