$ .focus () ไม่ทำงาน

ตัวอย่างสุดท้ายของของ jQuery focus()เอกสารรัฐ

$('#id').focus()

ควรทำให้อินพุตถูกโฟกัส (แอ็คทีฟ) ฉันไม่สามารถทำงานนี้ได้

แม้ในคอนโซลของไซต์นี้ฉันก็ลองใช้มันสำหรับช่องค้นหา

$('input[name="q"]').focus()

และฉันก็ไม่ได้อะไรเลย ความคิดใด ๆ

จริงๆแล้วตัวอย่างที่คุณให้ความสำคัญกับเว็บไซต์นี้ใช้งานได้ดีตราบใดที่คุณไม่ได้เน้นในคอนโซล เหตุผลที่ไม่ทำงานเป็นเพียงเพราะมันไม่ได้ขโมยโฟกัสจากคอนโซล dev หากคุณเรียกใช้รหัสต่อไปนี้ในคอนโซลของคุณและจากนั้นคลิกอย่างรวดเร็วในหน้าต่างเบราว์เซอร์ของคุณหลังจากนั้นคุณจะเห็นมันเน้นช่องค้นหา:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

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

พบวิธีแก้ปัญหาที่อื่นบนเน็ต ...

$('#id').focus();

ไม่ทำงาน.

$('#id').get(0).focus();

ทำงานได้ดี

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

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

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

สิ่งนี้ไม่ได้ผล ฉันรู้เพียงสิ่งที่เกิดขึ้นเมื่อผมดำเนินการ $ ( '# elementid'). โฟกัส () `จากคอนโซลที่ไม่ได้ทำงาน ความแตกต่าง - ในรหัสของฉันสูงกว่าเป้าหมายไม่มีความมั่นใจว่าเป้าหมายจะ Infact สามารถมองเห็นได้ตั้งแต่การเคลื่อนไหวอาจจะไม่สมบูรณ์ และมีร่องรอยอยู่

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

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

ถ้าคุณใช้ bootstrap + modal สิ่งนี้ใช้ได้กับฉัน:

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

ในกรณีที่คนอื่นสะดุดในคำถามนี้และมีสถานการณ์เดียวกันกับที่ฉันมี - ฉันพยายามกำหนดโฟกัสหลังจากคลิกที่องค์ประกอบอื่น แต่โฟกัสไม่ได้ทำงาน ปรากฎว่าฉันต้องการe.preventDefault();- นี่คือตัวอย่าง:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

สิ่งนี้ช่วย:

หากคุณโทร HTMLElement.focus () จากตัวจัดการเหตุการณ์ mousedown คุณจะต้องเรียกใช้ event.preventDefault () เพื่อป้องกันไม่ให้โฟกัสออกจาก HTMLElement ที่มา: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

ฉันรู้ว่ามันเก่า แต่ก็เจอกันวันนี้ ไม่มีคำตอบใดที่เหมาะกับฉันสิ่งที่ฉันได้พบว่ามันเป็น setTimeout ฉันต้องการให้ความสำคัญของฉันจะถูกวางไว้ในการป้อนข้อมูลยื่นของ modal โดยใช้ setTimeout ทำงาน หวังว่านี่จะช่วยได้!

ฉันยังมีปัญหานี้ โซลูชันที่ทำงานในกรณีของฉันคือการใช้คุณสมบัติ tabindex ในองค์ประกอบ HTML

ฉันกำลังใช้ ng-repeatองค์ประกอบ li บางอย่างในรายการและฉันไม่สามารถโฟกัสไปยัง li แรกที่ใช้. โฟกัส () ดังนั้นฉันเพียงแค่เพิ่มแอตทริบิวต์ tabindex ให้กับแต่ละ li ในระหว่างการวนซ้ำ

ดังนั้นตอนนี้ <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

+1 นั้นคือดัชนีเริ่มจาก 0 นอกจากนี้ตรวจสอบให้แน่ใจว่าองค์ประกอบนั้นมีอยู่ใน DOM ก่อนที่จะเรียกใช้ฟังก์ชัน. focus ()

ฉันหวังว่านี่จะช่วยได้.

สำหรับผู้ที่มีปัญหาการไม่ทำงานเพราะคุณใช้ "$ (องค์ประกอบ) .show ()" ฉันแก้ไขมันด้วยวิธีต่อไป:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

ดังนั้นคุณไม่ต้องการตัวจับเวลามันจะทำงานหลังจากวิธีการแสดงเสร็จสมบูรณ์

เพิ่มความล่าช้าก่อนโฟกัส () 200 ms ก็เพียงพอแล้ว

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

มีปัญหานี้อีกครั้งในตอนนี้และเชื่อหรือไม่ทั้งหมดที่ฉันต้องทำคือปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ เห็นได้ชัดว่าแท็บคอนโซลมีความสำคัญกับเนื้อหาของหน้า

ตรวจสอบให้แน่ใจว่าองค์ประกอบและผู้ปกครองนั้นสามารถมองเห็นได้ คุณไม่สามารถใช้การมุ่งเน้นองค์ประกอบที่ซ่อนอยู่

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

• https://stackoverflow.com/a/43342974/1335717

สำหรับกรณีของฉันฉันต้องระบุดัชนีแท็บ ( -1หากสามารถโฟกัสผ่านสคริปต์ได้เท่านั้น)

<div tabindex='-1'>
<!-- ... -->
</div>