Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

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

Thuộc tính type của đối tượng Input Time trả về hoặc thiết lập kiểu của ô nhập liệu. Mặc định là time, nhưng có thể thay đổi thành datetime-local, checkbox, text... qua JavaScript.

Cú pháp

Lấy giá trị type

inputTimeObject.type

Thiết lập type

inputTimeObject.type = 'giá_trị_chuỗi'

Các giá trị chuỗi

stringValueChi tiết
timeÔ chọn giờ (mặc định).
datetime-localÔ chọn ngày giờ cục bộ.
checkboxHộp kiểm (checkbox).
textÔ nhập văn bản thường.

Ví dụ minh họa

Hiển thị loại input mong đợi khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
<title>Input Time type</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-type</legend>
    <label for="TimeSelect"></label> 
    <input type="time" id="TimeSelect"> 
    <input type="button" onclick="hienThiLoai()" value="Nhập gì?"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var labelDisplay = document.querySelector("label"); 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputTime = document.getElementById("TimeSelect"); 
  function hienThiLoai() { 
    labelDisplay.textContent = 'Giờ: '; 
    divDisplay.textContent = 'Mong đợi input kiểu time (hh:mm:ss.ms)'; 
  } 
</script> 
</body> 
</html>

Kết quả

  • Ban đầu: label trống, divDisplay trống.
  • Nhấn Nhập gì?: label "Giờ:", divDisplay "Mong đợi input kiểu time (hh:mm:ss.ms)".

Khuyến cáo: Không nên thay đổi type động qua JS trong production do rủi ro tương thích trình duyệt. Khai báo đúng type trong HTML.