มีวิธีง่ายๆในการกำหนดโฟกัส (อินพุตเคอร์เซอร์) ของหน้าเว็บในองค์ประกอบอินพุตแรก (กล่องข้อความ, รายการแบบเลื่อนลง, ... ) ในการโหลดหน้าโดยไม่ต้องทราบรหัสขององค์ประกอบหรือไม่
ฉันต้องการใช้มันเป็นสคริปต์ทั่วไปสำหรับทุกหน้า / ทุกรูปแบบของเว็บแอปพลิเคชันของฉัน
คำตอบ:
คุณยังสามารถลองใช้วิธีที่ใช้ jQuery:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
แม้ว่าสิ่งนี้จะไม่ตอบคำถาม (ต้องใช้สคริปต์ทั่วไป) แต่ฉันอาจมีประโยชน์สำหรับคนอื่นที่รู้ว่า HTML5 แนะนำแอตทริบิวต์ "ออโต้โฟกัส":
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
เจาะลึก HTML5มีข้อมูลเพิ่มเติม
autofocus ทำงานได้ดีแม้ว่า ขอบคุณ @Jacob spring:formautofocus="autofocus"
document.forms[0].elements[0].focus();
สิ่งนี้สามารถปรับแต่งได้โดยใช้การวนซ้ำเพื่อเช่น ไม่เน้นฟิลด์บางประเภทฟิลด์ที่ปิดใช้งานและอื่น ๆ ที่ดีกว่าคือการเพิ่ม class = "autofocus" ลงในช่องที่คุณทำจริงต้องการที่มุ่งเน้นและห่วงมากกว่ารูปแบบ [ผม] .elements [เจ] มองหา className ว่า
อย่างไรก็ตามปกติแล้วไม่ใช่ความคิดที่ดีที่จะทำในทุกหน้า เมื่อคุณโฟกัสอินพุตผู้ใช้จะสูญเสียความสามารถเช่น เลื่อนหน้าจากแป้นพิมพ์ หากไม่คาดคิดอาจเป็นเรื่องที่น่ารำคาญดังนั้นการโฟกัสอัตโนมัติก็ต่อเมื่อคุณค่อนข้างแน่ใจว่าการใช้ฟิลด์ฟอร์มจะเป็นสิ่งที่ผู้ใช้ต้องการทำ กล่าวคือ. ถ้าคุณเป็น Google
นิพจน์ jQuery ที่ครอบคลุมที่สุดที่ฉันพบว่าใช้งานได้คือ (ผ่านความช่วยเหลือจากตรงนี้ )
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
หากคุณใช้เฟรมเวิร์กPrototype JavaScript คุณสามารถใช้เมธอดfocusFirstElement :
Form.focusFirstElement(document.forms[0]);
มีการเขียนขึ้นที่นี่ซึ่งอาจใช้งานได้: ตั้งค่าโฟกัสเป็นอินพุตแรกบนเว็บเพจ
คุณต้องข้ามอินพุตที่ซ่อนอยู่ด้วย
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
whileคำสั่ง?
การวางโค้ดนี้ไว้ที่ส่วนท้ายของbodyแท็กจะเน้นองค์ประกอบที่เปิดใช้งานที่มองเห็นได้และไม่ได้ซ่อนเป็นครั้งแรกบนหน้าจอโดยอัตโนมัติ มันจะจัดการกับกรณีส่วนใหญ่ที่ฉันสามารถแจ้งให้ทราบสั้น ๆ
<script>
(function(){
var forms = document.forms || [];
for(var i = 0; i < forms.length; i++){
for(var j = 0; j < forms[i].length; j++){
if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
forms[i][j].focus();
return;
}
}
}
})();
</script>
ลองคำตอบข้างต้นหลายคำแล้วก็ไม่ได้ผล พบสิ่งนี้ที่: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 ขอบคุณ Kolodvor
$("input:text:visible:first").focus();
ฉันใช้สิ่งนี้:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
สิ่งนี้จะรับอินพุตทั่วไปที่มองเห็นได้เป็นครั้งแรกรวมถึงพื้นที่ข้อความและกล่องเลือก นอกจากนี้ยังช่วยให้แน่ใจว่าไม่ได้ซ่อนปิดใช้งานหรืออ่านอย่างเดียว นอกจากนี้ยังอนุญาตให้มี div เป้าหมายซึ่งฉันใช้ในซอฟต์แวร์ของฉัน (เช่นอินพุตแรกในแบบฟอร์มนี้)
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
สำหรับผู้ที่ใช้ JSF2.2 + และไม่สามารถส่งต่อออโต้โฟกัสเป็นแอตทริบิวต์ที่ไม่มีค่าให้ใช้สิ่งนี้:
p:autofocus="true"
และเพิ่มลงในเนมสเปซ p (มักใช้ pt. อะไรก็ได้ที่คุณต้องการ)
<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
ไม่มี jquery เช่นด้วยจาวาสคริปต์ปกติ:
document.querySelector('form input:not([type=hidden])').focus()
ใช้งานได้กับ Safari แต่ไม่ใช่ Chrome 75 (เมษายน 2019)
ด้วยAngularJS:
angular.element('#Element')[0].focus();
ซึ่งรวมถึงพื้นที่ข้อความและไม่รวมปุ่มตัวเลือก
$(document).ready(function() {
var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
if(first_input != undefined){ first_input.focus(); }
});
คุณควรจะใช้ clientHeight แทนการตรวจสอบแอตทริบิวต์ display ได้เนื่องจากผู้ปกครองอาจซ่อนองค์ประกอบนี้:
function setFocus() {
var forms = document.forms || [];
for (var i = 0; i < forms.length; i++) {
for (var j = 0; j < forms[i].length; j++) {
var widget = forms[i][j];
if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
&& (typeof widget.disabled === "undefined" || widget.disabled === false)
&& (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
widget.focus();
break;
}
}
}
}
}
หากไม่มี libs ของบุคคลที่สามให้ใช้สิ่งที่ต้องการ
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
ตรวจสอบให้แน่ใจว่าคุณได้พิจารณาแท็กองค์ประกอบของฟอร์มทั้งหมดตัดแท็กที่ซ่อน / ปิดใช้งานเหมือนในคำตอบอื่น ๆ เป็นต้น ..