home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML DOM Input รหัสผ่าน placeholder property

คุณสมบัติตัวยึดตำแหน่ง HTML DOM Input Password ใช้สำหรับการตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ placeholder ของฟิลด์รหัสผ่านอินพุต คุณสมบัติตัวยึดตำแหน่งใช้สำหรับให้คำแนะนำแก่ผู้ใช้หน้าเว็บเกี่ยวกับองค์ประกอบอินพุตโดยแสดงข้อความภายในช่องใส่ก่อนที่ผู้ใช้จะป้อนข้อมูลใดๆ ข้อความตัวยึดตำแหน่งจะเป็นสีเทาโดยค่าเริ่มต้นและจะไม่ถูกส่งไปยังแบบฟอร์มซึ่งแตกต่างจากคุณสมบัติของค่า

ไวยากรณ์

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

การตั้งค่าคุณสมบัติตัวยึดตำแหน่ง -

passwordObject.placeholder = text

ในที่นี้ ข้อความแสดงถึงข้อความตัวแทนที่ระบุคำใบ้สำหรับผู้ใช้เกี่ยวกับฟิลด์รหัสผ่าน

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>password placeholder property</h1>
Password: <input type="password" id="PASS1" placeholder="....">
<p>Change the placeholder text of the above field by clicking the below button</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
   function changeHolder() {
      document.getElementById("PASS1").placeholder = "Enter your password here..";
   }
</script>
</body>
</html>

ผลลัพธ์

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

HTML DOM Input รหัสผ่าน placeholder property

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

HTML DOM Input รหัสผ่าน placeholder property

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

ขั้นแรก เราได้สร้างช่องป้อนรหัสผ่านด้วยรหัส “PASS1” และค่าแอตทริบิวต์ตัวยึดตำแหน่งเป็น “….”

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

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

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

changeHolder()ใช้เมธอด getElementById() เพื่อรับองค์ประกอบอินพุตด้วยรหัสผ่านประเภท จากนั้นตั้งค่าคุณสมบัติตัวยึดตำแหน่งเป็น “ป้อนรหัสผ่านของคุณที่นี่..” ซึ่งสะท้อนอยู่ในฟิลด์รหัสผ่าน -

function changeHolder() {
   document.getElementById("PASS1").placeholder = "Enter your password here..";
}