คุณสมบัติการโฟกัสอัตโนมัติของปุ่ม HTML DOM เชื่อมโยงกับคุณสมบัติออโต้โฟกัสขององค์ประกอบ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติออโต้โฟกัสของปุ่ม -
buttonObject.autofocus = true|false
ในที่นี้ true|false จะระบุว่าปุ่มอินพุตที่ให้มาควรได้รับการโฟกัสไม่ใช่เมื่อโหลดหน้าเว็บ
- จริง − ปุ่มอินพุตได้รับการโฟกัส
- ผิด − ปุ่มป้อนข้อมูลไม่ได้รับการโฟกัส
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติการโฟกัสอัตโนมัติของปุ่ม HTML DOM -
<!DOCTYPE html>
<html>
<body>
<button type="button" id="MyButton" autofocus>BUTTON</button>
<p>Click the below button to know if the input button above automatically gets the focus on page load or not</p>
<button onclick="buttonFocus()">CLICK IT</button>
<p id="Sample"></p>
<script>
function buttonFocus() {
var x = document.getElementById("MyButton").autofocus;
if(x==true)
document.getElementById("Sample").innerHTML="The input button does get focus on page load";
else
document.getElementById("Sample").innerHTML="The input button does not get focus on
page load";
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม CLICK IT -
ในตัวอย่างข้างต้น −
เรามีปุ่มที่มีรหัส "MyButton" และเปิดใช้งานคุณสมบัติออโต้โฟกัส -
<button type="button" id="MyButton" autofocus>BUTTON</button>
จากนั้นเรามีปุ่ม CLICK IT เพื่อใช้งานฟังก์ชั่น buttonFocus() -
<button onclick="buttonFocus()">CLICK IT</button>
ฟังก์ชัน buttonFocus() รับองค์ประกอบของปุ่มโดยใช้เมธอด getElementById() และรับค่าโฟกัสอัตโนมัติ ซึ่งเป็นบูลีนและกำหนดให้กับตัวแปร x การใช้คำสั่งแบบมีเงื่อนไข เราจะตรวจสอบว่าค่าโฟกัสอัตโนมัติเป็นจริงหรือเท็จ และแสดงข้อความที่เหมาะสมตามนั้นในองค์ประกอบ
ที่มี id “Sample” เชื่อมโยงอยู่
function buttonFocus() {
var x = document.getElementById("MyButton").autofocus;
if(x==true)
document.getElementById("Sample").innerHTML="The input button does get focus on page load";
else
document.getElementById("Sample").innerHTML="The input button does not get focus on page load";
} 