HTML DOM Input Search defaultValue Thuộc tính

Thuộc tính defaultValue của HTML DOM Input Search được sử dụng để đặt hoặc lấy defaultValue của trường tìm kiếm. Giá trị defaultValue của một phần tử là giá trị được gán cho thuộc tính giá trị. Sự khác biệt giữa thuộc tính value và defaultValue là thuộc tính defaultValue giữ nguyên giá trị mặc định ban đầu trong khi giá trị thuộc tính value thay đổi dựa trên thông tin người dùng nhập vào trường tìm kiếm.

Cú pháp

Sau đây là cú pháp để đặt thuộc tính defaultValue -

searchObject.defaultValue = value

Ở đây, “giá trị” là giá trị mặc định của trường tìm kiếm.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính Search defaultValue -

<!DOCTYPE html>
<html>
<body>
<h1>Input Search defaultValue Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>
<p>Change the above search field default value by clicking on the CHANGE button</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeDefault() {
      document.getElementById("SEARCH1").defaultValue="APPLE";
      var P=document.getElementById("SEARCH1").defaultValue;
      document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;
   }
</script>
</body>
</html>

Đầu ra

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

HTML DOM Input Search defaultValue Thuộc tính

Khi nhấp vào nút THAY ĐỔI -

HTML DOM Input Search defaultValue Thuộc tính

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một phần tử với type =”search”, id =”SEARCH1”, name =”results” và nó có thuộc tính giá trị được đặt thành “MANGO”. Trường tìm kiếm nằm trong biểu mẫu -

<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>

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

<button type="button" onclick="changeDefault()">CHANGE</button>

Phương thức changeDefault () sử dụng phương thức getElementById () để lấy trường đầu vào với tìm kiếm kiểu và đặt thuộc tính defaultValue của nó thành “APPLE”. Sau đó, chúng tôi lấy thuộc tính defaultValue của đầu vào với tính năng tìm kiếm kiểu bằng cách sử dụng lại phương thức getElementById () và gán nó cho biến P. Biến này sau đó được hiển thị trong đoạn có id “Sample” bằng cách sử dụng thuộc tính innerHTML của đoạn văn -

function changeDefault() {
   document.getElementById("SEARCH1").defaultValue="APPLE";
   var P=document.getElementById("SEARCH1").defaultValue;
   document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;
}