HTML DOM ใส่รหัสผ่านวัตถุ

ออบเจ็กต์รหัสผ่านสำหรับป้อน HTML DOM เชื่อมโยงกับองค์ประกอบ ที่มีประเภท "รหัสผ่าน" เราสามารถสร้างและเข้าถึงองค์ประกอบอินพุตด้วยรหัสผ่านประเภทโดยใช้เมธอด createElement() และ getElementById() ตามลำดับ

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติของรหัสผ่านวัตถุ -

ซีเนียร์	คุณสมบัติ &คำอธิบาย
1	เติมข้อความอัตโนมัติ การตั้งค่าหรือคืนค่าแอตทริบิวต์เติมข้อความอัตโนมัติของช่องรหัสผ่าน
2	ออโต้โฟกัส หากต้องการตั้งค่าหรือส่งคืนฟิลด์รหัสผ่านควรได้รับการโฟกัสโดยอัตโนมัติเมื่อโหลดหน้า
3	ค่าเริ่มต้น ในการตั้งค่าหรือส่งคืนค่าเริ่มต้นของฟิลด์รหัสผ่าน
4	ปิดการใช้งาน เพื่อตั้งค่าหรือส่งคืนว่าฟิลด์รหัสผ่านถูกปิดใช้งานหรือไม่
5	แบบฟอร์ม เพื่อส่งคืนการอ้างอิงของแบบฟอร์มที่มีฟิลด์รหัสผ่าน
6	ความยาวสูงสุด การตั้งค่าหรือคืนค่าแอตทริบิวต์ความยาวสูงสุดของช่องรหัสผ่าน
7	ชื่อ ไปที่หรือส่งคืนค่าแอตทริบิวต์ชื่อของช่องรหัสผ่าน
8	รูปแบบ การตั้งค่าหรือส่งคืนค่าแอตทริบิวต์รูปแบบของช่องรหัสผ่าน
9	ตัวยึดตำแหน่ง การตั้งค่าหรือคืนค่าแอตทริบิวต์ตัวยึดตำแหน่งของช่องรหัสผ่าน
10	อ่านอย่างเดียว ตั้งค่าหรือคืนว่าช่องรหัสผ่านเป็นแบบอ่านอย่างเดียวหรือไม่
11	จำเป็น ให้ตั้งค่าหรือคืนว่าจำเป็นต้องกรอกช่องรหัสผ่านก่อนส่งแบบฟอร์มหรือไม่
12	ขนาด เพื่อตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ size ของฟิลด์รหัสผ่าน
13	พิมพ์ เป็นคุณสมบัติแบบอ่านอย่างเดียวที่ส่งคืนประเภทขององค์ประกอบแบบฟอร์มที่ฟิลด์รหัสผ่านเป็น
14	ค่า เพื่อตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ค่าของฟิลด์รหัสผ่าน

วิธีการ

ต่อไปนี้เป็นวิธีการสำหรับวัตถุรหัสผ่าน -

Sr.No	วิธีการ &คำอธิบาย
1	select() เพื่อเลือกเนื้อหาของฟิลด์รหัสผ่าน

ไวยากรณ์

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

การสร้างวัตถุรหัสผ่านอินพุต -

var P = document.createElement("INPUT");
P.setAttribute("type", "password");

ให้เราดูตัวอย่างของอ็อบเจกต์ Input Password −

<!DOCTYPE html>
<html>
<head>
<script>
   function createPASS() {
      var P = document.createElement("INPUT");
      P.setAttribute("type", "password");
      document.body.appendChild(P);
   }
</script>
</head>
<body>
<p>Create an input field with type password by clicking the below button</p>
<button onclick="createPASS()">CREATE</button>
<br><br>
PASSWORD:
</body>
</html>

ผลลัพธ์

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

HTML DOM ใส่รหัสผ่านวัตถุ

เมื่อคลิกปุ่ม CREATE และพิมพ์ในช่องรหัสผ่านที่สร้างขึ้นใหม่ -

HTML DOM ใส่รหัสผ่านวัตถุ

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

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

<button onclick="createPASS()">CREATE</button>

เมธอด createPass() ใช้เมธอด createElement() ของอ็อบเจ็กต์เอกสารเพื่อสร้างองค์ประกอบ โดยส่ง "INPUT" เป็นพารามิเตอร์ องค์ประกอบอินพุตที่สร้างขึ้นใหม่ถูกกำหนดให้กับตัวแปร P และใช้เมธอด setAttribute() เราสร้างแอตทริบิวต์ประเภทด้วยรหัสผ่านค่า โปรดจำไว้ว่า setAttribute() สร้างแอตทริบิวต์แล้วกำหนดค่าหากไม่มีแอตทริบิวต์ก่อนหน้านี้ สุดท้าย ใช้วิธีการ appendChild() บนเนื้อหาของเอกสาร เราผนวกองค์ประกอบอินพุตด้วยรหัสผ่านประเภทเป็นลูกของร่างกาย -

function createPASS() {
   var P = document.createElement("INPUT");
   P.setAttribute("type", "password");
   document.body.appendChild(P);
}