Thuộc tính defaultValue của HTML DOM Input URL

Thuộc tính defaultValue của đối tượng Input URL trả về hoặc thiết lập giá trị mặc định ban đầu của ô nhập URL. Khác với value (thay đổi khi người dùng gõ), defaultValue giữ nguyên trừ khi gán lại qua JS. Dùng cho chức năng "Khôi phục mặc định".

Cú pháp

Lấy giá trị chuỗi

inputURLObject.defaultValue

Thiết lập defaultValue

inputURLObject.defaultValue = 'chuỗi'

Ví dụ minh họa

Ô URL có defaultValue="https://www.google.com". Nhấn nút reset sẽ gán value = defaultValue:

<!DOCTYPE html>
<html>
<head>
<title>Input URL defaultValue</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>URL-defaultValue</legend>
    <label for="URLSelect">URL: <input type="url" id="URLSelect" size="25" value="https://www.google.com"> </label> 
    <input type="button" onclick="resetDefault()" value="Khôi phục mặc định"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputURL = document.getElementById("URLSelect"); 
  divDisplay.textContent = 'defaultValue: ' + inputURL.defaultValue; 
  function resetDefault() { 
    var currentValue = inputURL.value; 
    divDisplay.textContent = 'Value - ' + inputURL.value + ' resets to - ' + inputURL.defaultValue; 
    inputURL.value = inputURL.defaultValue; 
  } 
</script> 
</body> 
</html>

Kết quả

• Ban đầu: ô URL hiển thị google.com, divDisplay: "defaultValue: https://www.google.com".
• Người dùng sửa URL thành bing.com.
• Nhấn Khôi phục mặc định: ô URL quay về google.com, divDisplay: "Value - https://www.bing.com resets to - https://www.google.com".

Mẹo: Dùng form.reset() sẽ tự động khôi phục tất cả input về defaultValue của chúng.