Фокус -элементы
Какие элементы могут получить фокус? По умолчанию только элементы формы могут получить фокус. Потому что только элементы формирования могут взаимодействовать
<input type = "text" value = "223">
Есть также способ получить фокус необработанных элементов. Сначала установите атрибут tabIndex на -1, а затем вызовите метод focus() .
<div id = "test" style = "Высота: 30px; ширина: 100px; фон: Lightgreen"> div </div> <button id = "btn"> элемент div получает фокус </button> <script> btn.onclick = function () {test.tabindex = -1; test.focus (); } test.onfocus = function () {this.style.background = 'pink';} </script>ActiveElement
Свойство document.activeElement используется для управления фокусом DOM и сохраняет элементы, которые в настоящее время уделяют фокус.
[Примечание] Это свойство не поддерживается браузером IE
<div id = "test" style = "height: 30px; ширина: 100px; фон: Lightgreen"> div </div> <button id = "btn"> элемент div получает фокус </button> <script> console.log (document.activeElement); // <body> btn.onclick = function () {) {console.Log (document.ActiveEleme); test.focus (); console.log (document.activeElement); // <div>} </script>Получите фокус
Существует 4 способа для элементов, чтобы получить фокус, включая загрузку страницы, пользовательский ввод (нажмите клавишу Tab), метод focus() и свойство autofocus
【1】 Загрузка страницы
По умолчанию, когда документ просто загружен, ссылка на элемент кузова сохраняется в document.activeElement . Во время загрузки документов значение document.activeElement является нулевым
<script> console.log (document.activeElement); // null </script> <body> <script> console.log (document.activeElement); // <body> </script> </body>
【2】 Пользовательский ввод (нажмите клавишу вкладки)
Пользователи обычно могут использовать ключ вкладки для перемещения фокусировки и использования пространственной панели, чтобы активировать фокус. Например, если сосредоточено на ссылке, нажмите кнопку космической панели в настоящее время, и она прыгнет к ссылке
Когда дело доходит до клавиши вкладки, мы не должны упоминать атрибут tabindex . Атрибут tabindex используется для указания того, пересекается ли текущий узел элемента HTML с помощью ключа TAB и приоритета обхода
1. Если tabindex=-1 , клавиша вкладки пропускает текущий элемент
2. Если tabindex=0 , это означает, что клавиша TAB будет пересекать текущий элемент. Если элемент не устанавливает tabindex , значение по умолчанию равно 0
3. Если tabindex больше 0, это означает, что клавиша вкладки первой. Чем больше значение, тем меньше приоритет
В следующем коде, при использовании клавиши TAB, порядок, в котором кнопка получает фокус 2, 5, 1 и 3
<div id = "box"> <button tabindex = "3"> 1 </button> <button tabindex = "1"> 2 </button> <button tabindex = "0"> 3 </button> <button tabindex = "-1"> 4 </button> <button Tabindex = "2"> 5 </button> </div> <croppt> box.onkey.gancele.comele. 'pink';} </script>
【3】 Focus ()
Метод focus() используется для установки фокуса браузера на поле формы, то есть активировать поле формы, чтобы он мог реагировать на события клавиатуры.
[Примечание] Как упоминалось ранее, если это не элемент формы, установите на tabIndex -1, вы также можете получить фокус
<span id = "test1" style = "height: 30px; width: 100px;"> span </span> <input2 = "test2" value = "input"> <button id = "btn1"> span element получает фокус </button> <button Id = "btn2"> Входной элемент получает фокус </button> <script> btn1.Onclic function () {test1.tabindex = -1; test1.focus ();} btn2.onclick = function () {test2.focus ();} </script>【4】 Автофокус
Свойство autofocus было добавлено в поле формы HTML5. Пока это свойство установлено, фокус может быть автоматически перемещен в соответствующее поле без JavaScript.
[Примечание] Этот атрибут может использоваться только для элементов формы. Даже если нормальный элемент установлен на tabIndex=”-1″ , он не вступит в силу.
<input autofocus value = "abc">
hasfocus ()
Метод document.hasFocus() Проверив, получил ли документ фокус, вы можете знать, взаимодействует ли он с страницей.
console.log (document.hasfocus ()); // true // Нажмите на другие вкладки в течение двух секунд, чтобы сосредоточить фокус оставить текущую страницу settimeout (function () {console.log (document.hasfocus ()); // false}, 2000);Теряя фокус
Если вы используете JavaScript, чтобы потерять фокус, вам нужно использовать метод blur()
Функция метода blur() состоит в том, чтобы удалить фокус из элемента. При вызове метода blur() фокус не будет передаваться в определенный элемент; это просто для того, чтобы удалить фокус из элемента, вызывающего метод
<input id = "test" type = "text" value = "123"> <button Id = "btn1"> Входной элемент получает фокус </button> <button id = "btn2"> входной элемент теряет фокус </button> <script> btn1.onclick = function () {test.focus ();} btn2.onclick = function () {test.);Фокус событий
Событие Focus запускается, когда страница получает или теряет фокус. Используя эти события и сотрудничество с методом document.hasFocus() и свойством document.activeElement , вы можете узнать местонахождение пользователя на странице.
Фокус -события включают следующие 4
1. Размытие
Событие blur увольняется, когда элемент теряет фокус. Это событие не будет пузыриться
2. Фокус
Событие focus выпускается, когда элемент получает фокус. Это событие не будет пузыриться
3. Focusin
Событие focusin уволена, когда элемент получает фокус. Это событие эквивалентно событию focus , но оно пузырь
4. Focusout
Событие focusour запускается, когда элемент теряет фокус. Это событие эквивалентно событию размытия, но оно пузырит
[Примечание] Что касается событий FocusIn и Focusout, за исключением обработчика Event Event Browser IE.
<div id = "box" style = "display: inline-block; padding: 25px; фоновый цвет: Lightgreen;"> <div id = "boxin" style = "Высота: 50px; ширина: 50px; фоновый цвет: pink;"> 123 </div> </div> <button id = "btn1"> div-элемент с Content intember intemble intember intember intemple 123. теряет фокус </button> <button id = "Reset"> Restore </button> <script> reset.onclick = function () {inistory.go ();} // Focus () Метод btn1.onclick = function () {boxin.tabindex = -1; boxin.focus ();} // blur () метод btn2.onclick = function () {boxin.blur ();} // focusin event if (boxin.addeventlistener) {boxin.addeventListener ('Focusin', Handler)} else {boxin.onfocusin = handler;} function handler ()} straglor {this.backolor () {stracklor () {stragrylor ()} = 'LightBlue';} if (box.addeventListener) {box.addeventListener ('Focusin', Handler)} else {box.onfocusin = Handler;} // Функция события размытия fnblur () {this.style.backgroundcolor = 'anrower';} boxin.onblur = fnblur; fnblur Из результатов бега мы видим, что событие focusin может пузыриться; в то время как событие blur не может пузыриться.
События фокусировки часто используются для отображения и проверки формы
Например, когда вы получаете фокус, измените цвет фона; Когда вы теряете фокус, восстановите цвет фона и проверьте его.
<div id = "box"> <input id = "input1" type = "text" Placeholder = "только ввод номера"> <input 2 "type =" text "Placeholder =" только вводите китайские символы "> <span ID =" tips "> </span> </div> <cript> if (box.addeventListener) {box.deventLister ('fociptIn', fnIn '); box.addeventListener ('Focusout', fnout);} else {box.onfocusin = fnin; box.onfocusout = fnout;} function fnin (e) {e = e || событие; var target = e.target || E.srcelement; target.style.backgroundcolor = 'lightgreen';} функция fnout (e) {e = e || событие; var target = e.target || E.srcelement; target.style.backgroundcolor = 'initial'; // Если это текстовое поле, которое проверяет число if (target === input1) {if (!/^/D*$/. Test (target.value.trim ())) {target.focus (); tips.innerhtml = 'только введите номера, пожалуйста, повторно введите' settimeout (function () {tips.innerhtml = ''}, 500); }} // Если это текстовое поле, которое проверяет китайские символы, если (target === input2) {if (!/^[/U4e00-/u9fa5]*$/. Test (target.value.trim ())) {target.focus (); tips.innerhtml = 'только введите китайские символы, пожалуйста, повторно введите' settimeout (function () {tips.innerhtml = '' '}, 500); }}}} </script>Суммировать
Выше приведено, чтобы суммировать все содержание управления фокусировкой в JavaScript для вас. Эта статья введена подробно и имеет определенную справочную ценность для вашего исследования и работы. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения.