คุณสมบัติขนาดรหัสผ่านอินพุต HTML DOM

คุณสมบัติขนาดรหัสผ่านอินพุต HTML DOM ใช้สำหรับการตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ขนาดรหัสผ่านอินพุต ใช้สำหรับกำหนดความกว้างของฟิลด์รหัสผ่านในแง่ของอักขระ ความกว้างเริ่มต้นคือ 20 อักขระ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติขนาดรหัสผ่าน -

passwordObject.size = number

ในที่นี้ ตัวเลขแสดงถึงความกว้างของฟิลด์รหัสผ่านเป็นอักขระ ความกว้างเริ่มต้นคือ 20 อักขระ

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input password size property</h1>
Password: <input type="password" id="PASS1">
<p>Change the Password field width by clicking the below button</p>
<button onclick="changeSize()">CHANGE</button>
<p id="Sample">
<script>
   function changeSize() {
      document.getElementById("PASS1").size+=20;
      var s=document.getElementById("PASS1").size;
      document.getElementById("Sample").innerHTML="The password field width is now "+ s;
   }
</script>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติขนาดรหัสผ่านอินพุต HTML DOM

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

คุณสมบัติขนาดรหัสผ่านอินพุต HTML DOM

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

ขั้นแรกเราได้สร้างช่องป้อนรหัสผ่านด้วยรหัส “PASS1”

Password: <input type="password" id="PASS1">

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

<button onclick="changeSize()">CHANGE</button>

เมธอด changeSize() ใช้เมธอด getElementById() เพื่อรับฟิลด์อินพุตที่มีรหัสผ่านประเภทและเพิ่มคุณสมบัติขนาด ความกว้างทั้งหมดของฟิลด์รหัสผ่านตอนนี้เพิ่มขึ้น 20 อักขระ จากนั้นเราใช้คุณสมบัติ size อีกครั้งเพื่อรับขนาดและกำหนดให้กับตัวแปร s ค่าขนาดใหม่จะแสดงในย่อหน้าที่มีรหัส “ตัวอย่าง” โดยใช้คุณสมบัติ innerHTML

function changeSize() {
   document.getElementById("PASS1").size+=20;
   var s=document.getElementById("PASS1").size;
   document.getElementById("Sample").innerHTML="The password field width is now "+ s;
}