วิธีตั้งค่าโฟกัสบนฟิลด์อินพุตโดยใช้ JQuery

ให้โครงสร้าง HTML ต่อไปนี้:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

ซึ่งจะถูกทำซ้ำหลาย ๆ ครั้งบนหน้าฉันจะตั้งค่าโฟกัสที่ช่องป้อนข้อมูลใน.bottomdiv ได้อย่างไรเมื่อผู้ใช้คลิกที่ลิงก์ใน.topdiv

ฉันกำลังทำให้.bottomdiv ปรากฏสำเร็จเมื่อคลิกโดยใช้โค้ด JQuery ด้านล่าง แต่ดูเหมือนจะไม่สามารถหาวิธีตั้งค่าโฟกัสบนช่องป้อนข้อมูลในเวลาเดียวกันได้

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

ขอบคุณ!

ลองทำเช่นนี้เพื่อตั้งโฟกัสไปที่ช่องป้อนข้อมูลแรก:

$(this).parent().siblings('div.bottom').find("input.post").focus();

หากอินพุตอยู่ในกล่องโต้ตอบโมดอล bootstrap คำตอบจะแตกต่างกัน คัดลอกจากHow to Set focus เป็น text input ตัวแรกใน bootstrap modal หลังจากที่แสดงแล้ว นี่คือสิ่งที่จำเป็น:

$('#myModal').on('shown.bs.modal', function () {
  $('#textareaID').focus();
})  

คำตอบของจัสตินไม่ได้ผลสำหรับฉัน (Chromium 18, Firefox 43.0.1) jQuery .focus()สร้างไฮไลต์ภาพ แต่เคอร์เซอร์ข้อความไม่ปรากฏในฟิลด์ (jquery 3.1.0)

แรงบันดาลใจจากhttps://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ฉันได้เพิ่มแอตทริบิวต์ออโต้โฟกัสในช่องป้อนข้อมูลและ voila!

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}