Autofocus html не работает

Автофокус не работает для поля ввода

Когда я нажимаю кнопку входа в систему, отображается одно всплывающее окно.

В этом всплывающем окне мне нужен автофокус по умолчанию в поле ввода логина. Могу ли я добиться этого только с помощью HTML5 / CSS?

5 ответов

Ответ не совсем эффективен (с уверенностью).

Я бы предложил Javascript, как упоминалось в UnskilledFreak , при каждом щелчке устанавливается фокус

Вот ваша обновленная скрипка: http://jsfiddle.net/6f9ge64f/2/

Вам, вероятно, также следует проверить ввод с клавиатуры для людей, которые не используют мышь.

Обновление:

Это немного взломано, но вы можете попробовать

Где PATH-TO-FILE — это, например, http://www.test.com/default.html (абсолютное или относительное), а ?c=1 и ?c=2 — это любые параметры, просто чтобы спровоцировать перезагрузку. вот так вы могли бы использовать autofocus .

ЭТО НЕ РАБОТАЕТ В JSFIDDLE, поскольку HTML встроен, но он работает в «реальном мире» .

Обновление 2:

Автофокус работает только при стандартной загрузке страницы. Если вы используете javascript / angular / response / jquery для изменения элементов после загрузки страницы, активный элемент изменяется, а автофокус не работает.

Что я делаю, так это жду, пока все элементы dom загрузятся и обработаются, а затем устанавливаю активный элемент

Если вы используете jQuery, сделайте что-нибудь вроде этого:

Атрибут Autofocus перемещает фокус на указанный вход при загрузке страницы. В этом случае #input присутствует в DOM, но скрыт; при нажатии кнопки входа в систему фокус удаляется.

Вероятно, следует использовать .focus () в обработчике события щелчка входа в систему

autofocus определен для надежной работы только при загрузке страницы. Это не совсем подходит для ситуаций, когда вы меняете местами, открываете или показываете элементы DOM, например, в структуре одностраничного приложения. Скорее всего, вам придется прибегнуть к помощи автофокусировки самостоятельно.

Источник

Автофокус на input

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Автофокус
Здравствуйте скажите пожалуйста как убрать автофокус со всех компонентов то бишь что бы при нажатии.

Автофокус поля на форме
Наверное простой вопрос, но всё же. Есть документ. В верхней части — поля, в нижней — табличная.

Автофокус на поле ввода
Здравствуйте, уважаемые форумчане! Подскажите, пожалуйста, как реализовать задачу: Есть форма.

Автофокус при загрузке
всем привет есть кнопка:

В Опере и Хроме у input работает атрибут autofocus. Но в MS Edge ничего не работает. Никакой из костылей. Страница после загрузки тупо неактивная.

_oleg, в MS Edge не работает.

Добавлено через 27 минут
Тестовый стенд. Попытка при загрузке страницы выставить курсор на второе поле.
В Опере работает любой из методов
price.setSelectionRange(0,0);
price.select();,
а в MS Edge только фокусируется при старте без установки курсора.

Автофокус второй мышки на форме
На форме размещен WMP. Естественно, что нажатие мышки будет отрабатываться только когда фокус.

Автофокус горизонтальной полосы прокрутки
горизонтальная полоса прокрутки в блочном элементе

, после того, как её двигаешь мышью, может.

Автофокус при загрузке страницы
Всем привет! Подскажите как убрать автофокусировку на странице приложения при его загрузке. В.

Nokia Lumia 1020 на основной камере не работает автофокус
Доброго времени суток! Проблема заключается в следующем, на основной камере (та что 41Мп) не.

Источник

Setting ‘autofocus’ attribute with JavaScript not working

I am writing a small plugin, and the plugin will encapsulate an autofocus setting, but when I add the attribute dynamically with JavaScript, it doesn’t autofocus the page, which is weird. Is there anyway around this?

3 Answers 3

Try something like this

Edit

If you want to HTML 5 standard you should make the HTML look something like this

The best approach seems to be this:

This post might help explain why to use a reflected property: https://stackoverflow.com/a/18770417/3920924

However it seems you need to apply it near the document load. Otherwise it doesn’t seem to fire. I think that’s because here (http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control:-the-autofocus-attribute:the-dialog-element) it’s defined to work as soon as the page is loaded. I haven’t seen anything else that says it can be called later in time. Every time I’ve tried to fire it later with like a setTimeout of 3 seconds it never focuses the field.

Try to add the javascript code soon after the input element, so it will execute before the page load complete. In your case autofocus attribute is set to the element but focusing the element which has autofocus by browser is already done. so you setting the value after browser set the focus. when browser trying to set it no attribute is there. try like following code

If you need to do it on button click or something, you need to do it in JavaScript. setting an attribute doesn’t mean browser is going to execute it at anytime.

Not the answer you’re looking for? Browse other questions tagged javascript html or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Не работает focus для инпутов и текстэриа

Комментарий модератора

Один вопрос — одна отдельная тема!

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Разработка своего элемента управления. Не работает TabNavigations и корректный Focus для внутренних элементов
Требуется помощь в доработке элемента управления и его шаблона (это не наследник от UserControl, а.

Не работает метод focus()
Я делю форму поиска которая ищет товар по старние (один таб) и по области-городу (второй таб).

Не работает :focus в Safari
Столкнулся с такой проблемой: имеется кнопка, на ней стоит autofocus, то есть при загрузке страницы.

Не работает фокусирование на странице. focus();
Как сделать фокус на страницу? Есть функция и при её срабатывании хтмл страничка должна приходить.

Не работает событие focus() (я 1000 раз напишу на доске разницу JS и Java)
Помогите разобраться. Не заменяется картинка по событию focus() $(document).ready(function () <.

Плагин для валидации инпутов без редактирования HTML
Нужно, чтобы кастомное сообщение о неправильном инпуте высвечивалось в такой вот рамке, как если.

Logical Focus для кнопок в WinForms
Здравствуйте, у меня возникла проблемой с которой я бьюсь уже больше месяца. Есть приложение.

Focus на WebBrowser для его прокрутки колесом мыши
Доброго времени суток. Есть форма на ней поля для ввода данных и webBrowser1 для просмотра пдф. .

В теме для WP в OPERA 12 для не отрабатывается focus после события click мыши
Форумчане доброго дня! Очень нужна Ваша помощь в решении следующей проблемы. Есть сайт на.

валидность инпутов
Добрый день! у меня есть инпуты, и мне нужно свалидировать их на пустоту используя blur и focus.

Источник

Фокусировка: focus/blur

Элемент получает фокус, когда пользователь кликает по нему или использует клавишу Tab . Также существует HTML-атрибут autofocus , который устанавливает фокус на элемент, когда страница загружается. Есть и другие способы получения фокуса, о них – далее.

Фокусировка обычно означает: «приготовься к вводу данных на этом элементе», это хороший момент, чтобы инициализовать или загрузить что-нибудь.

Момент потери фокуса («blur») может быть важнее. Это момент, когда пользователь кликает куда-то ещё или нажимает Tab , чтобы переключиться на следующее поле формы. Есть другие причины потери фокуса, о них – далее.

Потеря фокуса обычно означает «данные введены», и мы можем выполнить проверку введённых данных или даже отправить эти данные на сервер и так далее.

В работе с событиями фокусировки есть важные особенности. Мы постараемся разобрать их далее.

События focus/blur

Событие focus вызывается в момент фокусировки, а blur – когда элемент теряет фокус.

Используем их для валидации(проверки) введённых данных.

• Обработчик blur проверяет, введён ли email, и если нет – показывает ошибку.
• Обработчик focus скрывает это сообщение об ошибке (в момент потери фокуса проверка повторится):

Современный HTML позволяет делать валидацию с помощью атрибутов required , pattern и т.д. Иногда – это всё, что нам нужно. JavaScript можно использовать, когда мы хотим больше гибкости. А ещё мы могли бы отправлять изменённое значение на сервер, если оно правильное.

Методы focus/blur

Методы elem.focus() и elem.blur() устанавливают/снимают фокус.

Например, запретим посетителю переключаться с поля ввода, если введённое значение не прошло валидацию:

Это сработает во всех браузерах, кроме Firefox (bug).

Если мы что-нибудь введём и нажмём Tab или кликнем в другое место, тогда onblur вернёт фокус обратно.

Отметим, что мы не можем «отменить потерю фокуса», вызвав event.preventDefault() в обработчике onblur потому, что onblur срабатывает после потери фокуса элементом.

Потеря фокуса может произойти по множеству причин.

Одна из них – когда посетитель кликает куда-то ещё. Но и JavaScript может быть причиной, например:

• alert переводит фокус на себя – элемент теряет фокус (событие blur ), а когда alert закрывается – элемент получает фокус обратно (событие focus ).
• Если элемент удалить из DOM, фокус также будет потерян. Если элемент добавить обратно, то фокус не вернётся.

Из-за этих особенностей обработчики focus/blur могут сработать тогда, когда это не требуется.

Используя эти события, нужно быть осторожным. Если мы хотим отследить потерю фокуса, которую инициировал пользователь, тогда нам следует избегать её самим.

Включаем фокусировку на любом элементе: tabindex

Многие элементы по умолчанию не поддерживают фокусировку.

Какие именно – зависит от браузера, но одно всегда верно: поддержка focus/blur гарантирована для элементов, с которыми посетитель может взаимодействовать: , , , и т.д.

С другой стороны, элементы форматирования

, ,

– по умолчанию не могут получить фокус. Метод elem.focus() не работает для них, и события focus/blur никогда не срабатывают.

Это можно изменить HTML-атрибутом tabindex .

Любой элемент поддерживает фокусировку, если имеет tabindex . Значение этого атрибута – порядковый номер элемента, когда клавиша Tab (или что-то аналогичное) используется для переключения между элементами.

То есть: если у нас два элемента, первый имеет tabindex=»1″ , а второй tabindex=»2″ , то находясь в первом элементе и нажав Tab – мы переместимся во второй.

Порядок перебора таков: сначала идут элементы со значениями tabindex от 1 и выше, в порядке tabindex , а затем элементы без tabindex (например, обычный ).

При совпадающих tabindex элементы перебираются в том порядке, в котором идут в документе.

Есть два специальных значения:

tabindex=»0″ ставит элемент в один ряд с элементами без tabindex . То есть, при переключении такие элементы будут после элементов с tabindex ≥ 1 .

Обычно используется, чтобы включить фокусировку на элементе, но не менять порядок переключения. Чтобы элемент мог участвовать в форме наравне с обычными .

tabindex=»-1″ позволяет фокусироваться на элементе только программно. Клавиша Tab проигнорирует такой элемент, но метод elem.focus() будет действовать.

Например, список ниже. Кликните первый пункт в списке и нажмите Tab :

Порядок такой: 1 — 2 — 0 . Обычно
не поддерживает фокусировку, но tabindex включает её, а также события и стилизацию псевдоклассом :focus .

Мы можем добавить tabindex из JavaScript, используя свойство elem.tabIndex . Это даст тот же эффект.

События focusin/focusout

События focus и blur не всплывают.

Например, мы не можем использовать onfocus на

Пример выше не работает, потому что когда пользователь перемещает фокус на , событие focus срабатывает только на этом элементе. Это событие не всплывает. Следовательно, form.onfocus никогда не срабатывает.

У этой проблемы два решения.

Первое: забавная особенность – focus/blur не всплывают, но передаются вниз на фазе перехвата.

Второе решение: события focusin и focusout – такие же, как и focus/blur , но они всплывают.

Заметьте, что эти события должны использоваться с elem.addEventListener , но не с on .

Второй рабочий вариант:

Итого

События focus и blur срабатывают на фокусировке/потере фокуса элемента.

• Они не всплывают. Но можно использовать фазу перехвата или focusin/focusout .
• Большинство элементов не поддерживают фокусировку по умолчанию. Используйте tabindex , чтобы сделать фокусируемым любой элемент.

Источник