Як передати фокус

При розробці сценарію поведінки користувача на HTML-сторінці буває необхідно позначити курсор введення в певний елемент, розміщений на цій сторінці. Як, наприклад, це зроблено на головній сторінці пошукової системи Рамблер, де курсор при завантаженні сторінки встановлюється в полі введення пошукового запиту. Реалізувати таку передачу фокуса заданому елементу можна за допомогою мови javascript.
Як передати фокус




Інструкція
1
Скористайтеся властивістю focus () потрібного елемента сторінки, для передачі йому фокусу введення. Наприклад, щоб помістити курсор в текстове поле з ідентифікатором MainTextField відразу після завантаження сторінки в браузер відвідувача, можна помістити відповідний javascript-код в атрибут onload тега body:

Тут використано метод getElementById стандарту DOM (Document Object Model - «Об'єктна модель документа»), який здійснює пошук потрібного елемента за його ідентифікатором (id). Знайденому елементу передається фокус введення за допомогою властивості focus.


2
Якщо потрібно передати фокус, наприклад, при натисканні вміщеній в сторінку кнопки, то відповідний javascript-код можна помістити в атрибут, що визначає поведінку кнопки при натисканні по ній - onclick. Тег такої кнопки можна записати, наприклад, так:

Таким же способом можна помістити код передачі фокусу в теги більшості елементів, в яких допускається використання атрибута onclick.
3
Використовуйте атрибут onblur, якщо передати фокус потрібно не по клацанню, а з переміщення фокусу з якого-небудь елемента до наступного. Наприклад, якщо користувач заповнив одне поле форми і переходить до наступного, то можна примусово перевести фокус введення чи не до наступного по порядку елементу, а до того, який ви вкажете в коді, вміщеному в атрибут onblur:
4
Поміщайте в атрибут onblur умовний оператор, якщо потрібно передати фокус в залежності від виконання будь-якої умови. Наприклад, якщо поле форми обов'язково має бути заповнено, то в його атрибут onblur можна помістити перевірку, введено якесь значення і якщо відповідь негативна, то повернути фокус введення в це ж полі:
Переглядів: 4968

Увага, тільки СЬОГОДНІ!