วิธีการมุ่งเน้นไปที่เขตข้อมูลข้อความแบบฟอร์มในการโหลดหน้าโดยใช้ jQuery?

238

อาจเป็นเรื่องง่ายมาก แต่มีคนบอกฉันว่าจะให้เคอร์เซอร์กะพริบบนกล่องข้อความเมื่อโหลดหน้าเว็บได้อย่างไร

— คริส
แหล่งที่มา

96

เราไม่สนใจคำถามง่ายๆที่นี่

— DOK

ตรวจสอบคำตอบจากลิงค์ sohail arif ด้านล่าง: stackoverflow.com/questions/18054459/…

— Sohail Arif

378

ตั้งค่าโฟกัสไปที่ฟิลด์ข้อความแรก:

 $("input:text:visible:first").focus();

นี่เป็นฟิลด์ข้อความแรก แต่คุณสามารถเปลี่ยน [0] เป็นดัชนีอื่นได้:

$('input[@type="text"]')[0].focus();

หรือคุณสามารถใช้ ID:

$("#someTextBox").focus();

— ดอก
แหล่งที่มา

2

หากใช้กล่องโต้ตอบโปรดดูคำตอบนี้หากข้อมูลด้านบนไม่ทำงานstackoverflow.com/a/20629541/966609

— Matt Canty

1

$('input[type="text"]').get(0).focus(); ... ทำงานให้ฉัน

— Rav

92

คุณสามารถใช้HTML5autofocusสำหรับสิ่งนี้ คุณไม่ต้องการ jQuery หรือ JavaScript อื่น ๆ

<input type="text" name="some_field" autofocus>

หมายเหตุสิ่งนี้จะไม่ทำงานบน IE9 และที่ต่ำกว่า

— แอนดรูหลิว
แหล่งที่มา

ออโต้โฟกัสไม่ทำงานใน IE11 ทั้งstackoverflow.com/questions/34068302/…

— BA TabNabber

สิ่งนี้ใช้ได้กับสถานการณ์ของฉัน แต่คำตอบที่เลือกไม่ได้ด้วยเหตุผลบางประการ

— พระนารายณ์ YS

27

แน่นอนว่า:

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>

— Pandincus
แหล่งที่มา

2

ฉันแนะนำให้นำสคริปต์หลังจากองค์ประกอบ HTML

— Ali Sheikhpour

1

@AliSheikhpour สคริปต์อยู่ใน wrapper พร้อม dom ดังนั้นจึงไม่สำคัญว่าจะอยู่หน้าอิลิเมนต์ html แต่ไม่ควรอยู่ในหัวเลย

— Popnoodles

22

ทำไมทุกคนใช้ jQuery เพื่อสิ่งที่ง่ายเช่นนี้

<body OnLoad="document.myform.mytextfield.focus();">

— TD_Nijboer
แหล่งที่มา

15

เนื่องจากคำถามถูกแท็กเป็น jQuery

— Adarsh Madrecha

18

คิดถึงอินเตอร์เฟซผู้ใช้ของคุณก่อนที่คุณจะทำสิ่งนี้ ฉันคิดว่า (แม้ว่าจะไม่มีคำตอบใดที่บอกไว้) ว่าคุณจะทำสิ่งนี้เมื่อเอกสารโหลดโดยใช้ready()ฟังก์ชั่นของ jQuery หากผู้ใช้เพ่งความสนใจไปที่องค์ประกอบที่แตกต่างกันก่อนที่จะโหลดเอกสาร (ซึ่งเป็นไปได้อย่างสมบูรณ์) แล้วมันน่ารำคาญอย่างยิ่งสำหรับพวกเขาที่จะต้องขโมยโฟกัสไป

คุณสามารถตรวจสอบสิ่งนี้ได้โดยการเพิ่มonfocusคุณสมบัติในแต่ละ<input>องค์ประกอบของคุณเพื่อบันทึกว่าผู้ใช้เพ่งความสนใจไปที่เขตข้อมูลฟอร์มแล้วและไม่ขโมยโฟกัสหากมี:

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

— ทิมลง
แหล่งที่มา

2

มุมมองของคุณไม่เพียง แต่ถูกต้องทางเทคนิค แต่การพิจารณาถึง UX ที่ดีที่สุดที่เป็นไปได้นั้นยอดเยี่ยมมาก ไชโย!

— Folusho Oladipo

12

HTML:

  <input id="search" size="10" />

jQuery:

$("#search").focus();

— เบรนแดน
แหล่งที่มา

1

หากใช้ html5 เพียงแค่เพิ่มautofocusคุณลักษณะให้กับองค์ประกอบอินพุตหรือไม่

— Adarsh Madrecha

มีการใช้คุณลักษณะอย่างไรและจะกลายเป็นองค์ประกอบที่มุ่งเน้นทันทีที่ฟอร์มหลักปรากฏขึ้นหรือไม่

— Khom Nazid

8

ขออภัยสำหรับคำถามเก่า ๆ ฉันพบสิ่งนี้ผ่านทาง google

นอกจากนี้ยังเป็นที่น่าสังเกตว่ามีความเป็นไปได้ที่จะใช้ตัวเลือกมากกว่าหนึ่งตัวเลือกดังนั้นคุณสามารถกำหนดเป้าหมายองค์ประกอบรูปแบบใด ๆ และไม่ใช่ประเภทที่เฉพาะเจาะจง

เช่น.

$('#myform input,#myform textarea').first().focus();

สิ่งนี้จะเน้นอินพุตหรือ textarea แรกที่ค้นหาและแน่นอนคุณสามารถเพิ่มตัวเลือกอื่น ๆ ลงในมิกซ์ได้เช่นกัน ฉวยโอกาสถ้าคุณไม่สามารถแน่ใจได้ว่าเป็นประเภทองค์ประกอบที่เฉพาะเจาะจงเป็นอันดับแรกหรือถ้าคุณต้องการบางสิ่งบางอย่างทั่วไป / นำมาใช้ใหม่

— Andrew Calder
แหล่งที่มา

ข้อเสนอแนะที่ยอดเยี่ยม @Andrew

— DOK

6

นี่คือสิ่งที่ฉันต้องการใช้:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>

— poveilleux
แหล่งที่มา

3

มันเป็นวิธีที่ไม่ดีในการทำสิ่งต่าง ๆ เพื่อมุ่งเน้น <input> เกี่ยวกับการโหลดเอกสารเพียงใช้autofocusแอตทริบิวต์ที่มีให้โดย HTML5

— OverCoder

3

วางหลังจากป้อนข้อมูล

<script type="text/javascript">document.formname.inputname.focus();</script>

— บิลมาร์ควิส
แหล่งที่มา

0

วิธีที่ง่ายและง่ายที่สุดในการบรรลุเป้าหมายนี้

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});

— Muhammad Owais
แหล่งที่มา

0

บรรทัด$('#myTextBox').focus()เพียงอย่างเดียวจะไม่วางเคอร์เซอร์ไว้ในกล่องข้อความแทนที่จะใช้:

$('#myTextBox:text:visible:first').focus();

— David Sopko
แหล่งที่มา