คุณจะตั้งโฟกัสไปยังกล่องข้อความโดยอัตโนมัติเมื่อโหลดหน้าเว็บได้อย่างไร
มีแท็ก HTML ที่ต้องทำหรือต้องทำผ่าน Javascript หรือไม่
คำตอบ:
หากคุณกำลังใช้ jquery:
$(function() {
$("#Box1").focus();
});หรือต้นแบบ:
Event.observe(window, 'load', function() {
$("Box1").focus();
});หรือจาวาสคริปต์ธรรมดา:
window.onload = function() {
document.getElementById("Box1").focus();
};แม้ว่าโปรดทราบว่าสิ่งนี้จะแทนที่ส่วนอื่นบนตัวจัดการโหลดดังนั้นค้นหา addLoadEvent () ใน google เพื่อหาวิธีที่ปลอดภัยในการผนวกตัวจัดการ onload แทนการแทนที่
ใน HTML จะมีแอautofocusททริบิวต์ให้กับเขตข้อมูลฟอร์มทั้งหมด มีคำแนะนำเกี่ยวกับมันในเป็นดำน้ำใน HTML 5 น่าเสียดายที่ปัจจุบันยังไม่รองรับ IE เวอร์ชันต่ำกว่า 10
ในการใช้คุณสมบัติ HTML 5 และถอยกลับไปที่ตัวเลือก JS:
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>ไม่จำเป็นต้องใช้ jQuery, onload หรือ event handler เพราะ JS ต่ำกว่าองค์ประกอบ HTML
แก้ไข: ข้อดีอีกอย่างคือมันใช้งานได้กับ JavaScript ในเบราว์เซอร์บางตัวและคุณสามารถลบ JavaScript เมื่อคุณไม่ต้องการที่จะสนับสนุนเบราว์เซอร์รุ่นเก่า
แก้ไข 2: Firefox 4 ตอนนี้รองรับ autofocusคุณสมบัติเพียงออกจาก IE โดยไม่มีการสนับสนุน
autofocus="aufofocus"อะไร autofocusการเชื่อมโยงทั้งหมดที่คุณให้เพียงแค่พูดเพื่อเพิ่มแอตทริบิวต์:
attribute="value"เพื่อแอตทริบิวต์บูลีน HTML5 มาพร้อมกับ "แอตทริบิวต์ของแอตทริบิวต์ที่ว่างเปล่า" และเราลดความซ้ำซ้อน ตอนนี้เราสามารถทำได้<input checked disabled autofocus data-something>
คุณต้องใช้จาวาสคริปต์:
<BODY onLoad="document.getElementById('myButton').focus();">@Ben โปรดทราบว่าคุณไม่ควรเพิ่มตัวจัดการเหตุการณ์เช่นนี้ ในขณะที่เป็นคำถามอื่นเขาแนะนำให้คุณใช้ฟังก์ชันนี้:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}จากนั้นวางสายเพื่อ addLoadEvent บนหน้าของคุณและอ้างอิงฟังก์ชั่นการตั้งค่าโฟกัสไปยังกล่องข้อความที่คุณต้องการ
เพียงเขียนโฟกัสอัตโนมัติในฟิลด์ข้อความ มันง่ายและใช้งานได้เช่นนี้:
<input name="abc" autofocus></input>หวังว่านี่จะช่วยได้
คุณสามารถทำได้อย่างง่ายดายโดยใช้ jquery ด้วยวิธีนี้:
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>โดยเรียกใช้ฟังก์ชันนี้ใน $(document).ready()โดยการเรียกฟังก์ชั่นนี้
หมายความว่าฟังก์ชันนี้จะทำงานเมื่อ DOM พร้อม
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชัน READY โปรดดูที่: http://api.jquery.com/ready/
การใช้วานิลลาธรรมดา HTML และจาวาสคริปต์
<input type='text' id='txtMyInputBox' />
<script language='javascript' type='text/javascript'>
function SetFocus()
{
// safety check, make sure its a post 1999 browser
if (!document.getElementById)
{
return;
}
var txtMyInputBoxElement = document.getElementById("txtMyInputBox");
if (txtMyInputBoxElement != null)
{
txtMyInputBoxElement.focus();
}
}
SetFocus();
</script>สำหรับผู้ที่อยู่ที่นั่นโดยใช้. net framework และ asp.net 2.0 หรือสูงกว่านั้นเป็นเรื่องเล็กน้อย หากคุณใช้เฟรมเวิร์กเวอร์ชันเก่ากว่าคุณจะต้องเขียนจาวาสคริปต์ที่คล้ายกับข้างบน
ในตัวจัดการ OnLoad ของคุณ (โดยทั่วไปคือ page_load หากคุณใช้เทมเพลตหน้าหุ้นที่มาพร้อมกับ Visual Studio) คุณสามารถใช้:
ค#
protected void PageLoad(object sender, EventArgs e)
{
Page.SetFocus(txtMyInputBox);
}VB.NET
Protected Sub PageLoad(sender as Object, e as EventArgs)
Page.SetFocus(txtMyInputBox)
End Sub(* หมายเหตุฉันลบอักขระขีดล่างออกจากชื่อฟังก์ชันที่โดยทั่วไปแล้ว Page_Load เนื่องจากในบล็อกรหัสมันปฏิเสธที่จะแสดงอย่างถูกต้อง! ฉันไม่เห็นในเอกสารมาร์กอัปวิธีรับขีดล่างเพื่อแสดงผลแบบไม่ใช้ Escape)
หวังว่านี่จะช่วยได้
IMHO วิธีการ 'ล้างข้อมูล' เพื่อเลือกฟิลด์ข้อความที่เปิดใช้งานแรกที่มองเห็นได้บนหน้าคือการใช้ jQuery และทำสิ่งนี้:
$(document).ready(function() {
$('input:text[value=""]:visible:enabled:first').focus();
});หวังว่าจะช่วย ...
ขอบคุณ ...
<html>
<head>
<script language="javascript" type="text/javascript">
function SetFocus(InputID)
{
document.getElementById(InputID).focus();
}
</script>
</head>
<body onload="SetFocus('Box2')">
<input id="Box1" size="30" /><br/>
<input id="Box2" size="30" />
</body>
</html> ตามคำแนะนำทั่วไปฉันขอแนะนำไม่ขโมยโฟกัสจากแถบที่อยู่ ( เจฟฟ์ได้พูดคุยเกี่ยวกับเรื่องนี้แล้ว )
หน้าเว็บอาจใช้เวลาโหลดซึ่งหมายความว่าการเปลี่ยนโฟกัสของคุณอาจเกิดขึ้นได้นานหลังจากผู้ใช้พิมพ์ URL ของ pae จากนั้นเขาสามารถเปลี่ยนใจและกลับมาพิมพ์ url ในขณะที่คุณกำลังโหลดหน้าเว็บของคุณและขโมยโฟกัสเพื่อใส่ไว้ในกล่องข้อความของคุณ
นั่นเป็นเหตุผลเดียวที่ทำให้ฉันลบ Google เป็นหน้าเริ่มต้นของฉัน
แน่นอนถ้าคุณควบคุมเครือข่าย (เครือข่ายท้องถิ่น) หรือหากการเปลี่ยนโฟกัสคือการแก้ปัญหาการใช้งานที่สำคัญลืมสิ่งที่ฉันพูดไป :)
ฉันมีปัญหาแตกต่างกันเล็กน้อย ฉันต้องการautofocusแต่ต้องการให้placeholderข้อความยังคงอยู่ข้ามเบราว์เซอร์ เบราว์เซอร์บางตัวจะซ่อนplaceholderข้อความทันทีที่ฟิลด์เน้นบางตัวจะเก็บไว้ ฉันต้องรับตัวยึดตำแหน่งที่อยู่ข้ามเบราว์เซอร์ซึ่งมีผลข้างเคียงแปลก ๆ หรือหยุดใช้autofocusผมมีทั้งได้รับตัวยึดเข้าพักที่เบราว์เซอร์ที่มีผลข้างเคียงที่แปลกหรือหยุดใช้
ดังนั้นฉันฟังคีย์แรกที่พิมพ์กับแท็ก body และเปลี่ยนเส้นทางคีย์นั้นไปยังฟิลด์อินพุตเป้าหมาย จากนั้นตัวจัดการเหตุการณ์ที่เกี่ยวข้องทั้งหมดจะถูกกำจัดเพื่อรักษาความสะอาด
var urlInput = $('#Url');
function bodyFirstKey(ev) {
$('body').off('keydown', bodyFirstKey);
urlInput.off('focus', urlInputFirstFocus);
if (ev.target == document.body) {
urlInput.focus();
if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
urlInput.val(ev.key);
return false;
}
}
};
function urlInputFirstFocus() {
$('body').off('keydown', bodyFirstKey);
urlInput.off('focus', urlInputFirstFocus);
};
$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);มันเป็นไปได้ที่จะตั้งค่าautofocusองค์ประกอบการป้อนข้อมูล
<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">ถ้าคุณใช้ ASP.NET คุณก็สามารถใช้ได้
yourControlName.Focus()ในรหัสบนเซิร์ฟเวอร์ซึ่งจะเพิ่ม JavaScript ที่เหมาะสมลงในหน้า
เฟรมเวิร์กฝั่งเซิร์ฟเวอร์อื่นอาจมีวิธีการที่เทียบเท่า
ใช้รหัสด้านล่าง สำหรับฉันมันใช้งานได้
jQuery("[id$='hfSpecialty_ids']").focus()