Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Input Thuộc tính giá trị mật khẩu

Thuộc tính giá trị mật khẩu đầu vào HTML DOM được liên kết với phần tử đầu vào có type =”password” và có thuộc tính giá trị. Thuộc tính này được sử dụng để chỉ định giá trị mặc định cho trường mật khẩu và nó cũng thay đổi giá trị thành đầu vào của người dùng.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính giá trị.

passwordObject.value = text;

Ở đây, văn bản được sử dụng để chỉ định giá trị cho trường mật khẩu.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính giá trị mật khẩu đầu vào -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Input Thuộc tính giá trị mật khẩu

Khi nhập một số văn bản bên trong trường mật khẩu và nhấp vào nút “Nhận giá trị” -

HTML DOM Input Thuộc tính giá trị mật khẩu

Trong ví dụ trên -

Chúng tôi đã tạo một trường nhập với mật khẩu loại và id của nó được đặt thành “PASS1”.

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

Sau đó, chúng tôi đã tạo nút “Nhận giá trị” sẽ thực thi phương thức getValue () khi người dùng nhấp vào -

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

Phương thức getValue () nhận phần tử đầu vào bằng cách sử dụng phương thức getElementById () và gán giá trị thuộc tính “value” của nó cho biến t. Nó sẽ trả về một chuỗi trống nếu bạn không nhập bất kỳ thứ gì vào trường mật khẩu trước khi nhấp vào nút "Nhận giá trị". Thuộc tính giá trị thay đổi với thông tin người dùng nhập nên nó sẽ hiển thị thông tin nhập hiện tại bên trong trường mật khẩu. Sau đó, biến này được hiển thị trong đoạn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -

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