ออบเจ็กต์ HTML DOM Input Password

ออบเจ็กต์ HTML DOM Input Password เกี่ยวข้องกับองค์ประกอบ <input> ที่มี type="password" สามารถสร้างและเข้าถึงได้ด้วยเมธอด createElement() และ getElementById() ตามลำดับ

คุณสมบัติ (Properties)

#	คุณสมบัติและคำอธิบาย
1	autocomplete — ตั้งค่า/ดึงค่า autocomplete attribute
2	autofocus — ตั้งค่า/ดึงค่า โฟกัสอัตโนมัติเมื่อโหลดหน้า
3	defaultValue — ตั้งค่า/ดึงค่า ค่าเริ่มต้นของช่องรหัสผ่าน
4	disabled — ตั้งค่า/ดึงค่า สถานะ disabled
5	form — ดึงอ้างอิงฟอร์มที่บรรจุช่องรหัสผ่าน
6	maxLength — ตั้งค่า/ดึงค่า maxlength attribute
7	name — ตั้งค่า/ดึงค่า name attribute
8	pattern — ตั้งค่า/ดึงค่า pattern attribute
9	placeholder — ตั้งค่า/ดึงค่า placeholder attribute
10	readOnly — ตั้งค่า/ดึงค่า สถานะ read-only
11	required — ตั้งค่า/ดึงค่า สถานะ required
12	size — ตั้งค่า/ดึงค่า size attribute (ความกว้างเป็นตัวอักษร)
13	type — (อ่านอย่างเดียว) คืนค่า "password"
14	value — ตั้งค่า/ดึงค่า value attribute (ค่าจริงที่กรอก)

เมธอด (Methods)

#	เมธอดและคำอธิบาย
1	select() — เลือกเนื้อหาภายในช่องรหัสผ่านทั้งหมด

ไวยากรณ์การสร้าง

var P = document.createElement("INPUT");
P.setAttribute("type", "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>คลิกปุ่มด้านล่างเพื่อสร้างช่องกรอกรหัสผ่าน</p>
<button onclick="createPASS()">สร้าง</button>
<br><br>
รหัสผ่าน: 
</body>
</html>

ผลลัพธ์

ก่อนคลิก: ไม่มีช่องรหัสผ่าน

หลังคลิก "สร้าง": ช่อง input type="password" ใหม่ปรากฏขึ้น และสามารถพิมพ์ได้ทันที

คำอธิบายโค้ด

ปุ่ม "สร้าง" เรียก createPASS()
createElement("INPUT") สร้าง element input ใหม่
setAttribute("type", "password") ตั้งค่า type เป็น password
appendChild() นำ element เข้าไปใน body

หมายเหตุ: setAttribute() จะสร้าง attribute ใหม่หากยังไม่มีอยู่