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

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

Cú pháp

Lấy giá trị boolean

inputTimeObject.readOnly

Thiết lập readOnly

inputTimeObject.readOnly = booleanValue

Các giá trị boolean

Ví dụ minh họa

Ô time có sẵn giá trị 12:45 và readOnly. Nhấn nút để kiểm tra trạng thái:

<!DOCTYPE html>
<html>
<head>
<title>Input Time 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>Time-readOnly</legend>
    <label for="TimeSelect">Giờ hẹn với Giám đốc:</label> 
    <input type="time" id="TimeSelect" value="12:45" readOnly> 
    <input type="button" onclick="thayDoiGio()" value="Sửa giờ"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputTime = document.getElementById("TimeSelect"); 
  function thayDoiGio() { 
    if(inputTime.readOnly === true) 
      divDisplay.textContent = 'Giờ hẹn không thể thay đổi'; 
    else 
      divDisplay.textContent = 'Giờ hẹn đã đặt lúc: ' + inputTime.value; 
  } 
</script> 
</body> 
</html>

Kết quả

• Ban đầu: ô time hiển thị 12:45, không cho chỉnh sửa (thường có màu nền xám nhẹ).
• Nhấn Sửa giờ: hiển thị "Giờ hẹn không thể thay đổi".

Khác biệt với disabled: readOnly vẫn gửi giá trị khi submit form, còn disabled không gửi. readOnly vẫn cho focus, copy; disabled thì không.