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

Thuộc tính readOnly của đối tượng Input URL trong HTML DOM xác định ô nhập URL có cho phép chỉnh sửa hay không. Khi true, người dùng không thể sửa nhưng vẫn focus, copy được, và giá trị vẫn gửi khi submit form.

Cú pháp

Lấy giá trị boolean

inputURLObject.readOnly

Thiết lập readOnly

inputURLObject.readOnly = booleanValue

Các giá trị boolean

Ví dụ minh họa

Ô URL contact chỉ đọc (readOnly), giá trị google.com. Nhấn "Copy URL" để copy, click vào ô báo lỗi:

<!DOCTYPE html>
<html>
<head>
<title>Input URL readOnly</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-readOnly</legend>
    <label for="URLSelect">Liên hệ: <input type="url" id="URLSelect" onclick="baoLoi()" value="https://www.google.com" readOnly> </label> 
    <input type="button" onclick="copyURL()" value="Copy URL"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputURL = document.getElementById("URLSelect"); 
  divDisplay.textContent = 'URL trên là chỉ đọc'; 
  function copyURL() { 
    inputURL.select(); 
    document.execCommand('copy'); 
    divDisplay.textContent = 'Đã copy URL: ' + inputURL.value; 
  } 
  function baoLoi(){ 
    divDisplay.textContent += ', Không thể chỉnh sửa.'; 
  } 
</script> 
</body> 
</html>

Kết quả

• Ban đầu: ô URL google.com, chữ "URL trên là chỉ đọc".
• Click vào ô URL: thêm "Không thể chỉnh sửa.".
• Nhấn Copy URL: chọn tất cả, copy clipboard, hiển thị "Đã copy URL: https://www.google.com".

Khác biệt disabled: readOnly vẫn submit giá trị, cho focus/copy. disabled không submit, không focus.