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

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


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

ไวยากรณ์

ต่อไปนี้เป็นวากยสัมพันธ์ของ −

ตั้งค่าคุณสมบัติออโต้โฟกัส -

passwordObject.autofocus = true|false

ที่นี่ true แสดงว่าฟิลด์รหัสผ่านควรได้รับการโฟกัสและ false แทนมิฉะนั้น มันถูกตั้งค่าเป็นเท็จโดยค่าเริ่มต้น

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input password autofocus property</h1>
Password: <input type="password" id="PASS" autofocus>
<br><br>
<button onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
   function FocusVal() {
      var P = document.getElementById("PASS").autofocus;
      document.getElementById("Sample").innerHTML = "The password field has autofocus property set to "+P;
   }
</script>
</body>
</html>

ผลลัพธ์

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

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

เมื่อคลิกปุ่มตรวจสอบโฟกัส −

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

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

เราได้สร้างช่องป้อนข้อมูลด้วยประเภท "รหัสผ่าน", id "ผ่าน" และมีคุณสมบัติออโต้โฟกัสที่เปิดใช้งานเช่นตั้งค่าเป็นจริง -

Password: <input type="password" id="PASS" autofocus>

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

<button onclick="FocusVal()">CHECK FOCUS</button>

เมธอด FocusVal() รับองค์ประกอบอินพุตด้วยรหัสผ่านประเภทโดยใช้เมธอด getElementById() และรับคุณสมบัติออโต้โฟกัส คุณสมบัติออโต้โฟกัสคืนค่า true และ false ขึ้นอยู่กับค่าแอตทริบิวต์ autofocus ขององค์ประกอบ ค่านี้ถูกกำหนดให้กับตัวแปร P และแสดงในย่อหน้าด้วยรหัส "ตัวอย่าง" โดยใช้คุณสมบัติ innerHTML -

function FocusVal() {
   var P = document.getElementById("PASS").autofocus;
   document.getElementById("Sample").innerHTML = "The password field has autofocus property set to "+P;
}