เป็นไปได้ไหมที่จะโฟกัสที่ <div> โดยใช้ฟังก์ชั่นโฟกัส JavaScript ()?

227

เป็นไปได้หรือไม่ที่จะมุ่งเน้นไปที่ฟังก์ชั่นการ<div>ใช้ JavaScript focus()?

ฉันมี<div>แท็ก

<div id="tries">You have 3 tries left</div>

ฉันพยายามเน้นด้านบน<div>โดยใช้:

document.getElementById('tries').focus();

แต่มันไม่ทำงาน มีคนแนะนำอะไรซักอย่าง ....

javascript focus

— อ้อมนิรันดร์
แหล่งที่มา

3

คุณต้องการที่จะเกิดอะไรขึ้นเมื่อคุณ 'โฟกัส' มัน? Divs ไม่ยอมรับอินพุตดังนั้นคุณต้องการแฟลชชายแดนหรือแฟลชไฮไลท์พื้นหลัง ฯลฯ หรือไม่

— Michael Shimmins

@Michael ใช่ฉันต้องการ <div> เพื่อดึงความสนใจของผู้ใช้ ...

— OM The Eternity

1

ความเป็นไปได้ที่ซ้ำกันขององค์ประกอบ HTML ใดที่สามารถรับโฟกัสได้

— Ciro Santilli 郝海东冠状病六四事件法轮功

1

@MichaelShimmins และบุคคลอื่นองค์ประกอบ <div> สามารถรับอินพุตได้หากคุณมีการตั้งค่า contenteditable เป็นจริง (เหตุผลที่ฉันถาม)

— MattOlivos

1

@MichaelShimmins divสามารถรับอินพุตหากมีข้อมูลเกินและแสดงแถบเลื่อน เมื่อ a divพร้อมแถบเลื่อนโฟกัสปุ่มลูกศรจะเลื่อนเนื้อหา (แทนที่จะเป็นเนื้อหาขององค์ประกอบอื่น ๆ เช่นbody)

— Rory O'Kane

101

window.location.hash = '#tries';

สิ่งนี้จะเลื่อนไปที่องค์ประกอบที่เป็นปัญหาโดยพื้นฐานแล้ว "โฟกัส"

— Casey Chu
แหล่งที่มา

2

@Casey Chu: มันใช้งานได้ดี แต่ไม่ใช่ใน firefox คุณมีความคิดอะไรบ้าง?

— Haseeb Akhtar

มันไม่ทำงานในบางรุ่น Chrome ... แต่แก้ปัญหาไม่ได้ @vinoths

— Charliemops

1

ใช้งานได้ แต่ ... กับ Angular คุณจะมีปัญหา !!

— Carlos Verdes

@CarlosVerdes; มีวิธีแก้ปัญหาสำหรับ Angular หรือไม่?

— Mac Vicious

3

ไม่ตอบคำถาม 'โฟกัส' นี่ไม่ควรเป็นคำตอบที่ถูกต้อง ในกรณีของฉันฉันต้องการเน้น div 'contentEditable' และเคล็ดลับของคุณไม่ได้ช่วย

— arnaudambro

453

ใช่ - เป็นไปได้ เพื่อที่จะทำมันคุณจะต้องกำหนด tabindex ...

<div tabindex="0">Hello World</div>

Tabindex 0 จะใส่แท็ก "ในลำดับแท็บธรรมชาติของหน้า" จำนวนที่สูงกว่าจะให้ลำดับความสำคัญเฉพาะโดยที่ 1 จะเป็นลำดับแรกคือ 2 วินาทีและต่อ ๆ ไป

นอกจากนี้คุณยังสามารถให้แท็บดัชนี -1 ซึ่งจะทำให้ div เท่านั้นที่สามารถโฟกัสโดยสคริปต์ไม่ใช่ผู้ใช้

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

ขยายตัวอย่างข้อมูล

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

— เฟนตัน
แหล่งที่มา

6

@Michael Shimmins นี้จะช่วยให้องค์ประกอบที่จะสามารถโฟกัส (ในทางที่ไม่ได้มาตรฐาน!) focus()ด้วย

— แปลกหน้า

2

@ พระคัมภีร์ - ฉันค่อนข้างแน่ใจว่านั่นคือสิ่งที่มันบอกว่าในบรรทัดสุดท้ายของอาจตอบ แจ้งให้เราทราบหากคุณคิดว่ามีปัญหาที่ต้องแก้ไข

— เฟนตัน

2

หากยังไม่ชัดเจนการเพิ่มtabindexองค์ประกอบจะทำให้สามารถโฟกัสได้ซึ่งช่วยให้focus()และblur()วิธีการและจากนั้นคุณสามารถเรียกโฟกัสเช่นนี้ได้document.getElementById('tries').focus();

— Pilau

4

สวัสดี @ SteveOwen - ดูเหมือนว่าจะยังคงใช้งานได้ใน Firefox v42 ฉันเพิ่มตัวอย่างคำตอบนี้เพื่อให้คุณสามารถเรียกใช้และทดสอบ

— เฟนตัน

9

@SteveOwen ใช้window.location.hash = ...เป็นวิธีการทำ โฟกัสไม่ได้หมายถึง "นำเข้ามาดู" มันแค่หมายถึงการวางโฟกัสในองค์ประกอบนั้น

— เฟนตัน

76

document.getElementById('tries').scrollIntoView()โรงงาน วิธีนี้ใช้งานได้ดีกว่าwindow.location.hash เมื่อคุณกำหนดตำแหน่งไว้แล้ว

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

2

โปรดทราบว่าวิธีนี้จะไม่ทำงานใน IE, Opera หรือ Safari

— AlecRust

1

ฉันเพิ่งลองสิ่งนี้ใน Chrome 65 และใช้งานไม่ได้ Div overlay เลื่อนลงในมุมมอง แต่โฟกัสยังคงอยู่ใน div พื้นหลัง วิธีเดียวที่แน่นอนที่ฉันรู้คือการมีองค์ประกอบ tabbable (ใช้tabindexคุณลักษณะ) ใน div ซ้อนทับและใช้focus()ในองค์ประกอบนั้นแทน

— thdoan

@ om-the-eternity ได้ระบุไว้แล้วว่าเขาต้องการให้ div เรียกความสนใจของผู้ใช้ดังนั้นสิ่งที่เขาต้องการคือไม่ต้องให้ความสนใจจริง ๆ (แม้ในขณะที่ทำงานไม่ถูกต้องที่จะทำ) div แต่นำไปที่หน้าจอ นี่เป็นการแก้ปัญหาที่

— Omar Vazquez

ถ้าฉันทำสิ่งนี้ใน Chrome มันจะเลื่อนกลับไปที่ช่องป้อนข้อมูลที่ยังคงโฟกัสอยู่ โดยเฉพาะอย่างยิ่งหากหน้ายังไม่ได้โหลด

— Roger Krueger

37

คุณสามารถใช้ tabindex

<div tabindex="-1"  id="tries"></div>

ค่า tabindex สามารถอนุญาตให้มีพฤติกรรมที่น่าสนใจบางอย่าง

หากกำหนดค่าเป็น "-1" องค์ประกอบจะไม่สามารถแท็บได้ แต่จะสามารถกำหนดโฟกัสให้กับองค์ประกอบทางโปรแกรมได้ (โดยใช้ element.focus ())
หากกำหนดค่าเป็น 0 องค์ประกอบจะสามารถโฟกัสผ่านแป้นพิมพ์และตกลงไปในขั้นตอนการแท็บของเอกสาร ค่าที่มากกว่า 0 สร้างระดับความสำคัญโดยที่ 1 เป็นสิ่งสำคัญที่สุด

— Sarath Ak
แหล่งที่มา

1

ว้าวขอบคุณเคล็ดลับเด็ด ๆ ขอบคุณ! ฉันจะไม่คิดเรื่องนี้เป็นอย่างอื่น

— AVProgrammer

ช่วยชีวิตขอบคุณ ใน Edge div สามารถโฟกัสได้ แต่ไม่ใช่ใน Chrome หากไม่มีเคล็ดลับนี้ คำตอบที่ยอมรับได้ดี แต่ฉันไม่ต้องการส่วนเพิ่มเติมใน URL

— Cal

ช่วยชีวิตวอร์มด้วยโครเมียมและ Firefox

— Susampath

14

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

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

งานนี้สำหรับฉันในโครเมี่ยม / Chrome 46 รวมเฉพาะกับ$('#inner').focus();

— ทีเอ็นที

2

ฉันต้องการที่จะแนะนำบางอย่างเช่นของ Michael Shimmin แต่ไม่มีการเข้ารหัสอย่างเช่นองค์ประกอบหรือ CSS ที่ใช้กับมัน

ฉันใช้ jQuery สำหรับการเพิ่ม / ลบคลาสเท่านั้นหากคุณไม่ต้องการใช้ jQuery คุณเพียงแค่ต้องการแทนที่การเพิ่ม / removeClass

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

— Juan Mendes
แหล่งที่มา

1

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

ขยายตัวอย่างข้อมูล

— ซานจิง
แหล่งที่มา

0

ในการสร้างเส้นขอบแฟลชคุณสามารถทำได้:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

สิ่งนี้จะทำให้เส้นขอบทึบแดงเป็นเวลา 1 วินาทีจากนั้นนำออกอีกครั้ง

— Michael Shimmins
แหล่งที่มา