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

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

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

Інструкція

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

    <body onload=»document.getElementById(‘MainTextField’).focus()»>

    Тут використано метод getElementById стандарту DOM (Document Object Model — «Об’єктна модель документа»), який здійснює пошук потрібного елемента за його ідентифікатором (id). Знайденому елементу передається фокус введення за допомогою властивості focus.
  2. Якщо потрібно передати фокус, наприклад, при натисканні вміщеній в сторінку кнопки, то відповідний JavaScript-код можна помістити в атрибут, що визначає поведінку кнопки при натисканні на неї — onclick. Тег такої кнопки можна записати, наприклад, так:

    <button onclick=»document.getElementById(‘MainTextField’).focus()»> передати фокус </ button>

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

    <input type=»text» onblur=»document.getElementById(‘MainTextField’).focus()» />
  4. Поміщайте в атрибут onblur умовний оператор, якщо потрібно передати фокус в залежності від виконання певної умови. Наприклад, якщо поле форми обов’язково має бути заповнено, то в його атрибут onblur можна помістити перевірку, введено якесь значення і якщо відповідь негативна, то повернути фокус введення в цей же поле:

    <input type=»text» id=»MainTextField» onblur=»if(this.value==»)this.focus()» />