Thuộc tính tự động hoàn thành HTML DOM Form

Thuộc tính tự động hoàn thành HTML DOM Form được liên kết với thuộc tính autocomplete của phần tử biểu mẫu. Sử dụng thuộc tính tự động hoàn thành, chúng tôi có thể đặt hoặc trả về giá trị thuộc tính tự động hoàn thành của biểu mẫu nhất định. Thuộc tính này chỉ định xem trường nhập liệu có nên tự động hoàn thành văn bản do người dùng viết dựa trên văn bản đã được viết trước đó trong trường văn bản hay không.

Thuộc tính tự động hoàn thành có thể được tắt cho các trường đầu vào cụ thể nếu tính năng tự động hoàn thành được bật cho biểu mẫu và nó cũng đúng cho ngược lại.

Cú pháp

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

Đặt thuộc tính tự động hoàn thành -

formObject.autocomplete = on|off

Ở đây, “bật” là theo mặc định và trình duyệt cố gắng tự động hoàn thành các giá trị của người dùng dựa trên văn bản trước đó. Đặt nó thành tắt có nghĩa là trình duyệt sẽ không hoàn thành quá trình nhập của người dùng và người dùng phải tự nhập các giá trị.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ về thuộc tính tự động hoàn thành -

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function changeAuto() {
      document.getElementById("FORM1").autocomplete = "on";
      document.getElementById("Sample").innerHTML = "The input text will now be autocomplete
";
   }
</script>
</head>
<body>
<h1>Form autocomplete property example</h1>
<form id="FORM1" autocomplete="off">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAuto()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

Đầu ra

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

Thuộc tính tự động hoàn thành HTML DOM Form

Khi nhấp vào nút THAY ĐỔI và nhập văn bản vào trường Tên người dùng -

Thuộc tính tự động hoàn thành HTML DOM Form

Trong ví dụ trên -

Chúng tôi đã tạo một biểu mẫu với id =“Form1” và tự động hoàn thành được đặt thành “tắt”. Điều này có nghĩa là người dùng sẽ phải tự mình nhập các giá trị mà không cần trình duyệt web trợ giúp để tự động điền văn bản này. Biểu mẫu cũng chứa trường văn bản và trường mật khẩu -

<form id="FORM1" autocomplete="off">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>

Sau đó, chúng tôi tạo một nút CHANGE sẽ thực thi phương thức changeAuto () khi người dùng nhấp vào -

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

Phương thức changeAuto () nhận phần tử biểu mẫu bằng cách sử dụng phương thức getElementById () và đặt thuộc tính tự động hoàn thành thành “bật” từ “tắt”. Sử dụng thuộc tính innerHTML của đoạn văn có id “Mẫu”, chúng tôi thể hiện sự thay đổi này bằng cách hiển thị văn bản cho người dùng -

function changeAuto() {
   document.getElementById("FORM1").autocomplete = "on";
   document.getElementById("Sample").innerHTML = "The input text will now be autocomplete ";
}