คุณสมบัติ autofocus ของ HTML DOM Input Datetime

คุณสมบัติ autofocus ของ HTML DOM Input Datetime ใช้สำหรับกำหนดหรือตรวจสอบว่าช่องกรอกวันที่และเวลา (datetime) ควรได้รับโฟกัส (focus) อัตโนมัติเมื่อโหลดหน้าเว็บครั้งแรกหรือไม่

ไวยากรณ์ (Syntax)

การดึงค่า (คืนค่า boolean true/false)

inputDatetimeObject.autofocus

การกำหนดค่า autofocus

inputDatetimeObject.autofocus = booleanValue

ค่า Boolean (Boolean Values)

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการลบ autofocus ออกจากช่อง datetime ที่มี autofocus ตั้งแต่แรก:

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Autofocus</title>
</head>
<body>
Date & Time: <input type="datetime" id="Datetime" value="1998-04-09T12:48IST" autofocus>
<button onclick="removeAutoFocus()">Remove Auto Focus</button>
<div id="divDisplay"></div>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputDatetime = document.getElementById("Datetime");
  divDisplay.textContent = 'Autofocus: ' + inputDatetime.autofocus;
  function removeAutoFocus() {
    if(inputDatetime.autofocus == true){
      inputDatetime.autofocus = false;
      divDisplay.textContent = 'Autofocus: ' + inputDatetime.autofocus;
    }
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

เมื่อโหลดหน้าเว็บ: ช่อง datetime จะได้รับโฟกัสอัตโนมัติ (มีเคอร์เซอร์อยู่ในช่อง) หลังคลิกปุ่ม Remove Auto Focus: autofocus จะเป็น false และช่องจะไม่ได้รับโฟกัสอัตโนมัติเมื่อโหลดหน้าใหม่

หมายเหตุ: ในหน้าเว็บเดียวควรมีเพียงหนึ่งองค์ประกอบที่มี autofocus เท่านั้น