div/span 등 초점 질문 가져오기 (tabindex 속성의 간단한 이해)

1. 먼저 문제를 본다
div/span 요소에 초점을 맞추려면 $("#div1") 에 초점을 맞추십시오.focus () 는 다음 그림과 같이 효과를 실현할 수 없습니다.
입력 상자를 클릭하여 입력한 후 클릭 구역에서 선택 구역을 팝업할 때 input 입력 상자는 초점을 잃지 않았고(또는 영역의div가 초점을 얻지 못했다고) 키보드가 탄층 위에 표시되어 선택할 수 없는 버그가 발생했습니다.
두 가지 해결 방법이 있습니다.
a:모든 input 등 초점을 얻을 수 있는 요소를 순환시켜 초점을 잃게 한다(blur).
b:구역을 클릭하여 구역을 선택할 때div에 초점을 가져와 input의 초점을 잃지 않는 문제를 해결합니다.
여기서는 일반div/span 등 요소 노드에 대해 초점을 직접 얻을 수 없습니다. 속성tabindex를 사용해야 합니다

2.tabindex에 관한 과학 보급
div 탭에 연결된 onfocus 이벤트와 onblur 이벤트를 터치하려면 이 탭에tabindex 속성을 추가해야 합니다.
tabindex 속성은 사실 컴퓨터 "Tab"키를 눌렀을 때 커서가 이동하는 순서를 지정합니다. 컴퓨터 "Tab"키를 눌렀을 때 tabindex 속성 값이 작을수록 (최소 0) 라벨이 먼저 초점을 잡습니다.

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>04title>
    head>
    <body>
        <input type="text" id="text1">   
        <input type="text" id="text2">   
        <input type="text" id="text3">
　　　　 <div>  div>
    body>
html>

위의 코드를 실행하고 컴퓨터'Tab'키를 누르면 input 컨트롤러가 초점을 얻은 것을 발견할 수 있습니다.input 컨트롤은 onfocus 이벤트와 onblur 이벤트를 직접 터치할 수 있지만 div는 안 됩니다

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>testtitle>
    head>
    <body>
        <input type="text" id="text1" tabindex = "3">   
        <input type="text" id="text2" tabindex = "2">   
        <input type="text" id="text3" tabindex = "1">
    body>
html>

위 코드를 실행하려면 컴퓨터 "Tab"키를 누르면 input에서 오른쪽에서 왼쪽으로 초점을 받습니다

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>testtitle>
    head>
    <body>
        <input type="text" id="text1" tabindex = "1">   
        <input type="text" id="text2" tabindex = "2">   
        <input type="text" id="text3" tabindex = "3">
    body>
html>

위 코드를 실행하고 컴퓨터 "Tab"키를 누르면 input에서 왼쪽에서 오른쪽으로 초점을 받습니다
tabindex는 기본적으로 다음과 같은 요소(기본적으로 초점을 얻을 수 있는 요소)를 사용합니다. A,AREA,LABEL,INPUT,SELECT,TEXTAREA,and BUTTON.이 요소들은tabindex를 설정하지 않아도 초점을 얻을 수 있습니다. 다른 요소들은tabindex를 설정해야 초점을 얻을 수 있습니다. 그 중에서tabindex는tab키가 작을수록 초점을 먼저 잡을 수 있습니다.

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>04title>
    head>
    <body>
        <input type="text" id="text1">   
        <input type="text" id="text2">   
        <input type="text" id="text3">
　　  　 <div tabindex="0">  div>
    body>
html>

위의 코드div를 실행하면 초점을 얻을 수 있습니다. 시작할 때 초점이 input에 입력되었을 때div를 누르면 원래 input이 초점을 잃고 div도 초점을 얻을 수 있기 때문에 문제가 자연히 해결됩니다.
전재 대상:https://www.cnblogs.com/cdwp8/p/4309960.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

div/span 등 초점 질문 가져오기 (tabindex 속성의 간단한 이해)

좋은 웹페이지 즐겨찾기