HTML, как сделать активным поле формы.
Привет. никак не могу сделать чтобы при открытии страницы курсор сразу мигал в текстовом поле. например как на сайте ya.ru или sape.ru, тоесть открывается страница, а курсор уже в форме и можно сразу вводить текст, а не тыкать лишний раз на текстовое поле. есть простой код:
вроде все верно, почему же не работает?
На сайте с 08.08.2005
28 апреля 2008, 19:12
-(Oo)-:
Привет.
никак не могу сделать чтобы при открытии страницы курсор сразу мигал в текстовом поле.
например как на сайте ya.ru или sape.ru, тоесть открывается страница, а курсор уже в форме и можно сразу вводить текст, а не тыкать лишний раз на текстовое поле.
есть простой код:
вроде все верно, почему же не работает?
Активный input=»text»
Как в css определить что поле инпут является активным? то-есть я вот например хочу сделать что бы border был таков:
border: 1px solid black;
при условии что когда я ввожу текст в input=»text»
знаю что
.form input[type=»submit»]:active это если я просто нажал на инпут а вот как узнать когда я ввожу текст пожалуйста помогите
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Input button text
Подскажите как сделать ограничение на минимальный ввод символов в input text? Например в 3 символа.
input type=’text’ . .
Есть ли возможность в теге <input type=’text’ . > задать возможность или невозможность.
Input text с разноцветными словами
Input text с разноцветными словами — можно ли сделать и как?
Input text убрать выделение
Как в Input text убрать синие выделение при выделении текста и сделать так чтобы он не выделялся
152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493
У форм есть псевдокласс :focus
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
ignatuhindima, в css нет (и думаю, что не будет) псевдокласса, который бы проверял ввод пользователем текста в input или textarea. Это можно сделать на JS, однако и тут будут подводные камни.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Необходимо изменить value (input type=text)
Всем, привет! Не могу в поисковике найти, так что надеюсь на Вашу помощь! Есть input type=text.
Отступы в Input>text,search,email
Здравствуйте! Извините за глупый вопрос, но есть ли возможность сделать отступ в input (text.
if input type text empty alert
Как сделать чтобы если какой либо инпут пуст при нажати на сабмит появлялся алерт что это поле не.
Цвет фона input text в IE11
Добрый день всем! Подскажите, как можно корректно отображать бэкграунд текстового поля в 11.
Прировнять div к input(text) по ширине
input во всех браузерах выглядит по-разному, а у меня ниже его абсолютом прижат div, который должен.
Всплывающая подсказка для input text
Здравствуйте! Как сделать всплывающюю подсказку для input text Вроде какой то атрибут дефолтный.
Или воспользуйтесь поиском по форуму:
Как сделать, чтобы input был активным на чистом JS при клике на другой элемент?
Как сделать так, чтобы срабатывал автофокус во всплывающем input после клика на другой элемент, то есть чтобы на мобильных устройствах всплывала клавиатура, а на ПК курсор мыши вставал в поле ввода текста.
- Вопрос задан более двух лет назад
- 508 просмотров
Комментировать
Решения вопроса 1
Инженер-системотехник, программист, админ, ТПУ.
document.getElementById(«мой_id_инпута»).focus();
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +4 ещё
Что за файл и что в нем?
- 1 подписчик
- час назад
- 51 просмотр
.focus ( )
Метод, который устанавливает фокус на DOM-элемент, на котором вызван.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Как пишется
- Пример
- Как понять
- Что такое фокус?
- Когда нужен focus()?
- Не на каждый элемент можно установить фокус
- Николай Лопин советует
Обновлено 29 мая 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Вызов метода focus ( ) на DOM-элементе устанавливает фокус на этот элемент. Когда элемент находится в фокусе, он перехватывает и обрабатывает события клавиатуры.
Фокус нельзя поставить на элемент, если он заблокирован. Например, если у кнопки или поля ввода стоит атрибут disabled .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Метод focus ( ) обычно вызывается без аргументов, но в него также можно передать объект со свойством prevent Scroll :
element.focus()element.focus(< preventScroll: true >)element.focus() element.focus( preventScroll: true >)По умолчанию браузер прокручивает страницу до элемента, на который перемещён фокус. Это так же происходит, если prevent Scroll установлен в false . Если prevent Scroll установлен в true , то прокрутки страницы к элементу не произойдёт.
Пример
Скопировать ссылку «Пример» Скопировано
Представим, что мы работаем с веб-страницей с формой:
Your name: Email:form action="/apply" method="POST"> label> Your name: input type="text" name="name"> label> label> Email: input type="email" name="email" id="email"> label> button type="submit">Подать заявкуbutton> form>Чтобы программно установить фокус в поле Email нужно получить искомый элемент и вызвать метод focus ( ) на нём:
const emailInput = document.getElementById('email')emailInput.focus()const emailInput = document.getElementById('email') emailInput.focus()После выполнения кода поле станет доступно для ввода.
В примере фокус перемещается в зависимости от выбранного элемента в выпадающем списке:
Как понять
Скопировать ссылку «Как понять» Скопировано
Что такое фокус?
Скопировать ссылку «Что такое фокус?» Скопировано
Фокус в вебе — это обозначение активного элемента на странице. Такой элемент браузеры чаще всего обозначают голубой полупрозрачной обводкой. С активным элементом можно взаимодействовать, он принимает события клавиатуры. Например, когда мы печатаем значение в поле ввода, это поле ввода находится в фокусе.
Фокус критически важен для людей, которые не могут или не хотят пользоваться мышью. С помощью кнопки Tab такие пользователи перемещают фокус между интерактивными элементами внутри страницы. Это поведение предоставляется браузером по умолчанию.
На фокус можно влиять с помощью HTML-атрибутов autofocus и tabindex , а также из JavaScript с помощью вызова методов focus ( ) и blur ( ) у DOM-элементов.
Когда браузер отображает страницу, то по умолчанию фокус не установлен. При нажатии Tab фокус установится в первый интерактивный элемент сверху страницы и будет двигаться сверху вниз по порядку в разметке.
Когда нужен focus ( ) ?
Скопировать ссылку «Когда нужен focus()?» Скопировано
Бывают случаи, когда нужно программно установить фокус на элемент:
- пользователь нажал на кнопку, которая открывает модальное окно. Нужно переместить фокус в это окно, чтобы пользователь не потерялся.
- при выборе значения из списка нужно автоматически переместить фокус на зависимый список.
- при реализации кастомных горячих клавиш. Например, хотим перемещаться между элементами формы стрелками.
Эти случаи объединяет необходимость перемещать фокус непоследовательно, не так, как браузер делает по умолчанию. Произвольно переместить фокус позволяет метод focus ( ) .
Например, в случае с открытием модального окна нужно переместить фокус на него. Подпишемся на событие click на кнопке открытия окна и вызовем focus ( ) в обработчике:
const openModalButton = document.getElementById('open-modal-button')const modalWindow = document.getElementById('modal-window')openModalButton.addEventListener('click', function(event) modalWindow.focus()>)const openModalButton = document.getElementById('open-modal-button') const modalWindow = document.getElementById('modal-window') openModalButton.addEventListener('click', function(event) modalWindow.focus() >)Полный пример реализации модального окна описан в WAI-ARIA Authoring Practices.
Не на каждый элемент можно установить фокус
Скопировать ссылку «Не на каждый элемент можно установить фокус» Скопировано
Фокус — это обозначение активного элемента на странице, но не все элементы могут иметь фокус. Обычно фокус можно выставить интерактивным элементам, с которыми можно взаимодействовать с клавиатуры.
В спецификации HTML описаны все критерии, которые делают элемент доступным для фокуса. Мы же разберём самые важные.
Если не устанавливать атрибуты, которые влияют на доступность элемента для фокуса, то каждый браузер самостоятельно определяет, какой элемент может иметь фокус. Во всех современных браузерах, следующие элементы могут иметь фокус:
- ссылки с установленным атрибутом href ;
- кнопки ;
- поля ввода , кроме скрытых ( type = «hidden» );
- выпадающие списки ;
- поля многостраничного ввода textarea ;
- элементы ;
- произвольный элемент, если у него установлен атрибут tabindex .
Если у любого из этих элементов установить атрибут disabled , то элемент перестаёт быть доступным для фокуса.
На практике
Скопировать ссылку «На практике» Скопировано
Николай Лопин советует
Скопировать ссылку «Николай Лопин советует» Скопировано
�� Если нужно установить фокус на элемент сразу после загрузки страницы, то лучше добавить атрибут autofocus прямо в вёрстку. Браузер установит фокус на элемент самостоятельно:
Your name: Email:form action="/apply" method="POST"> label> Your name: input type="text" name="name" autofocus> label> label> Email: input type="email" name="email"> label> button type="submit">Подать заявкуbutton> form>�� Чтобы программно убрать фокус с элемента, нужно либо вызвать метод blur ( ) , либо переместить фокус на другой элемент. Не программно фокус убирается с помощью мыши, как только пользователь нажал на любую кнопку мыши.
�� За обводку элемента в фокусе отвечает CSS-свойство outline . Не скрывайте её, если на сайте нет альтернативного способы выделения элементов в фокусе.