При розробці сценарію поведінки користувача на HTML-сторінці буває необхідно позначити курсор введення в певний елемент, розміщений на цій сторінці. Як, наприклад, це зроблено на головній сторінці пошукової системи Рамблер, де курсор при завантаженні сторінки встановлюється в поле введення пошукового запиту. Реалізувати таку передачу фокуса заданому елементу можна за допомогою мови JavaScript.
Інструкція
- Скористайтеся властивістю focus () потрібного елементу сторінки, для передачі йому фокусу вводу. Наприклад, щоб помістити курсор в текстове поле з ідентифікатором MainTextField відразу після завантаження сторінки в браузер відвідувача, можна розмістити відповідний JavaScript-код у атрибут onload тега body:
<body onload=»document.getElementById(‘MainTextField’).focus()»>
Тут використано метод getElementById стандарту DOM (Document Object Model — «Об’єктна модель документа»), який здійснює пошук потрібного елемента за його ідентифікатором (id). Знайденому елементу передається фокус введення за допомогою властивості focus. - Якщо потрібно передати фокус, наприклад, при натисканні вміщеній в сторінку кнопки, то відповідний JavaScript-код можна помістити в атрибут, що визначає поведінку кнопки при натисканні на неї — onclick. Тег такої кнопки можна записати, наприклад, так:
<button onclick=»document.getElementById(‘MainTextField’).focus()»> передати фокус </ button>
Таким же способом можна помістити код передачі фокуса в теги більшості елементів, в яких допускається використання атрибута onclick. - Використовуйте атрибут onblur, якщо передати фокус потрібно не по клацанню, а з переміщення фокусу з якого-небудь елементу до наступного. Наприклад, якщо користувач заповнив одне поле форми і переходить до наступного, то можна примусово перевести фокус введення не до наступного по порядку елементу, а до того, який ви вкажете в коді, вміщеному в атрибут onblur:
<input type=»text» onblur=»document.getElementById(‘MainTextField’).focus()» /> - Поміщайте в атрибут onblur умовний оператор, якщо потрібно передати фокус в залежності від виконання певної умови. Наприклад, якщо поле форми обов’язково має бути заповнено, то в його атрибут onblur можна помістити перевірку, введено якесь значення і якщо відповідь негативна, то повернути фокус введення в цей же поле:
<input type=»text» id=»MainTextField» onblur=»if(this.value==»)this.focus()» />
