HTML DOM ใส่รหัสผ่าน ค่าคุณสมบัติ

คุณสมบัติค่ารหัสผ่าน HTML DOM Input เชื่อมโยงกับองค์ประกอบอินพุตที่มี type=”password” และมีแอตทริบิวต์ค่า คุณสมบัตินี้ใช้สำหรับระบุค่าเริ่มต้นสำหรับฟิลด์รหัสผ่าน และยังเปลี่ยนค่าเป็นการป้อนข้อมูลของผู้ใช้

ไวยากรณ์

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

การตั้งค่าคุณสมบัติ

passwordObject.value = text;

ในที่นี้ใช้ข้อความเพื่อระบุค่าสำหรับฟิลด์รหัสผ่าน

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input password Value property</h1>
PASSWORD: <input type="password" id="PASS1">
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
   function getValue() {
      var t = document.getElementById("PASS1").value;
      document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
   }
</script>
</body>
</html>

ผลลัพธ์

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

HTML DOM ใส่รหัสผ่าน ค่าคุณสมบัติ

ในการพิมพ์ข้อความในช่องรหัสผ่านและคลิกปุ่ม "รับค่า" -

HTML DOM ใส่รหัสผ่าน ค่าคุณสมบัติ

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

เราได้สร้างช่องป้อนข้อมูลด้วยรหัสผ่านประเภทและตั้งค่ารหัสเป็น “PASS1”

PHONE NO: <input type="number" value="222" id="NUMBER1">

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

<button onclick="getValue()">Get Value</button>

เมธอด getValue() รับองค์ประกอบอินพุตโดยใช้เมธอด getElementById() และกำหนดค่าแอตทริบิวต์ "value" ให้กับตัวแปร t มันจะส่งคืนสตริงว่างถ้าคุณไม่ป้อนสิ่งใดในฟิลด์รหัสผ่านก่อนที่จะคลิกปุ่ม "รับค่า" แอตทริบิวต์ค่าจะเปลี่ยนด้วยการป้อนข้อมูลของผู้ใช้ ดังนั้นจะแสดงข้อมูลป้อนปัจจุบันภายในช่องรหัสผ่าน ตัวแปรนี้จะแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML -

function getValue() {
   var t = document.getElementById("PASS1").value;
   document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}