คุณสมบัติโฟกัสอัตโนมัติของการค้นหาอินพุต HTML DOM เชื่อมโยงกับแอตทริบิวต์ออโต้โฟกัสขององค์ประกอบ HTML คุณสมบัตินี้ใช้สำหรับการตั้งค่าหรือส่งคืนหากช่องค้นหาอินพุตควรเน้นโดยอัตโนมัติเมื่อโหลดหน้าหรือไม่
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติออโต้โฟกัส -
searchObject.autofocus = true|false
ที่นี่ true แทนช่องค้นหาควรได้รับการโฟกัสและ false แทนมิฉะนั้น มันถูกตั้งค่าเป็นเท็จโดยค่าเริ่มต้น
ตัวอย่าง
ให้เราดูตัวอย่างของคุณสมบัติออโต้โฟกัสการค้นหาอินพุต -
<!DOCTYPE html>
<html>
<body>
<h1>Input search autofocus property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>
<p>Get the autofocus attribute value for the above search field by clicking the below
button.</p>
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
function FocusVal() {
var R = document.getElementById("SEARCH1").autofocus;
document.getElementById("Sample").innerHTML = "The search field has autofocus property
set to "+R;
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มตรวจสอบโฟกัส −
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้าง องค์ประกอบที่มี type=”search”, id=”SEARCH1”, name=”fruits” และมีการตั้งค่าแอตทริบิวต์ออโต้โฟกัสเป็นจริง ช่องค้นหาอยู่ในรูปแบบ −
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus> </form>
จากนั้นเราจะสร้างปุ่ม CHECK FOCUS ที่จะรันเมธอด FocusVal() เมื่อผู้ใช้คลิก -
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
เมธอด FocusVal() รับองค์ประกอบอินพุตด้วยการค้นหาประเภทโดยใช้เมธอด getElementById() และรับคุณสมบัติออโต้โฟกัส คุณสมบัติออโต้โฟกัสคืนค่าจริงและเท็จขึ้นอยู่กับค่าแอตทริบิวต์ออโต้โฟกัสของช่องค้นหา ค่านี้ถูกกำหนดให้กับตัวแปร f และแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML -
function FocusVal(){
var f = document.getElementById("SEARCH1").autofocus;
document.getElementById("Sample").innerHTML = "The search field autofocus property is set to: "+f;
} 