องค์ประกอบ HTML ใดที่สามารถรับโฟกัสได้

ฉันกำลังมองหารายการที่ชัดเจนขององค์ประกอบ HTML ที่ได้รับอนุญาตให้มุ่งเน้นคือองค์ประกอบใดบ้างที่จะถูกนำมาโฟกัสเมื่อfocus()ถูกเรียกใช้

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

ไม่มีรายการแน่นอนมันขึ้นอยู่กับเบราว์เซอร์ มาตรฐานเดียวที่เรามีคือHTML ระดับ 2 HTMLซึ่งเป็นองค์ประกอบเดียวที่มีfocus()วิธีการคือ HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement และ HTMLAnchorElement สิ่งนี้จะละเว้น HTMLButtonElement และ HTMLAreaElement โดยเฉพาะ

เบราว์เซอร์ของวันนี้กำหนดfocus()HTMLElement แต่องค์ประกอบจะไม่ให้ความสำคัญเว้นแต่จะเป็นหนึ่งใน:

• HTMLAnchorElement / HTMLAreaElement พร้อม href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement แต่ไม่ใช่disabled(IE ให้ข้อผิดพลาดกับคุณจริง ๆ ถ้าคุณลอง) และการอัปโหลดไฟล์มีพฤติกรรมที่ผิดปกติด้วยเหตุผลด้านความปลอดภัย
• HTMLIFrameElement (แม้ว่าการโฟกัสจะไม่มีประโยชน์อะไรเลย) องค์ประกอบการฝังอื่น ๆ ด้วยบางทีฉันยังไม่ได้ทดสอบทั้งหมด
• องค์ประกอบใด ๆ ที่มี tabindex

มีแนวโน้มว่าจะมีข้อยกเว้นและข้อมูลเพิ่มเติมอื่น ๆ เกี่ยวกับพฤติกรรมนี้ขึ้นอยู่กับเบราว์เซอร์

ที่นี่ฉันมีตัวเลือก CSS ตามคำตอบของbobinceเพื่อเลือกองค์ประกอบ HTML ที่สามารถโฟกัสได้:

  a[href]:not([tabindex='-1']),
  area[href]:not([tabindex='-1']),
  input:not([disabled]):not([tabindex='-1']),
  select:not([disabled]):not([tabindex='-1']),
  textarea:not([disabled]):not([tabindex='-1']),
  button:not([disabled]):not([tabindex='-1']),
  iframe:not([tabindex='-1']),
  [tabindex]:not([tabindex='-1']),
  [contentEditable=true]:not([tabindex='-1'])
  {
      /* your CSS for focusable elements goes here */
  }

หรือสวยขึ้นเล็กน้อยใน SASS:

a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
    &:not([tabindex='-1'])
    {
        /* your SCSS for focusable elements goes here */
    }
}

ฉันได้เพิ่มเป็นคำตอบเพราะนั่นคือสิ่งที่ฉันกำลังมองหาเมื่อ Google เปลี่ยนเส้นทางฉันไปที่คำถาม Stackoverflow

แก้ไข:มีตัวเลือกอีกหนึ่งตัวเลือกซึ่งสามารถโฟกัสได้:

[contentEditable=true]

อย่างไรก็ตามนี่ใช้น้อยมาก

$focusable:
  'a[href]',
  'area[href]',
  'button',
  'details',
  'input',
  'iframe',
  'select',
  'textarea',

  // these are actually case sensitive but i'm not listing out all the possible variants
  '[contentEditable=""]',
  '[contentEditable="true"]',
  '[contentEditable="TRUE"]',

  '[tabindex]:not([tabindex^="-"])',
  ':not([disabled])';

ฉันกำลังสร้างรายการ SCSS ขององค์ประกอบที่สามารถโฟกัสได้ทั้งหมดและฉันคิดว่าสิ่งนี้อาจช่วยคนได้เนื่องจากอันดับ Google ของคำถามนี้

สิ่งที่ควรทราบ:

• ฉันเปลี่ยน:not([tabindex="-1"])เป็น:not([tabindex^="-"])เพราะมันเป็นไปได้อย่างสมบูรณ์ที่จะสร้าง-2อย่างใด ปลอดภัยกว่าดีกว่าขออภัยใช่ไหม
• การเพิ่ม:not([tabindex^="-"])ตัวเลือกที่โฟกัสได้อื่นทั้งหมดนั้นไม่มีจุดหมายอย่างสมบูรณ์ เมื่อใช้[tabindex]:not([tabindex^="-"])แล้วจะมีองค์ประกอบทั้งหมดที่คุณจะปฏิเสธ:not !
• ฉันรวมไว้:not([disabled])เพราะองค์ประกอบที่ปิดใช้งานไม่สามารถโฟกัสได้ ดังนั้นมันไม่มีประโยชน์อะไรที่จะเพิ่มเข้าไปในทุก ๆ องค์ประกอบ

ally.jsห้องสมุดการเข้าถึงให้ทางการรายการทดสอบตามที่นี่:

https://allyjs.io/data-tables/focusable.html

(หมายเหตุ: หน้าเว็บของพวกเขาไม่ได้บอกว่ามีการทดสอบบ่อยเพียงใด)

บางทีนี่อาจช่วยได้:

function focus(el){
	el.focus();
	return el==document.activeElement;
}

ส่งคืนค่า: true = success, false = ล้มเหลว

Reff: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

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

http://www.w3schools.com/cssref/sel_focus.asp