По тем или иным причинам не всегда есть возможность подключить к странице jquery Тогда многие привычные вещи приходится делать руками. 

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

Эта короткая заметка из той же серии: как установить фокус на поле ввода используя только javascript

Очень просто, синтаксис аналогичный jquery

<html>
 <head>
 <script type="text/javascript">
 function setFocus(){
      document.getElementById("name").focus();
 }
 </script>
 </head>
 <body onload="setFocus()">
   <form>
        Name: <input type="text" id="name" size="30"><br />
        Surname: <input type="text" id="surname" size="30"> 
   </form>
 </body>
 </html>

Пример, как оно работает

Name:
Surname:

Еще есть вариант установить свойство autofocus

Очередной камень в огород тех, кто при любом чихе использует jquery. Просто не найти нужно информации за бесчисленными советами "...jquery.focus и не парься..." 

Рассказать друзьям
author.jpg

Платная консультация по вопросам 1500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

Добавить комментарий


Комментарии   

User
0 # User 02.04.2013 10:41
Leroy, не могли бы Вы убрать форму

и её JS из АНОНСА этого поста (или заменить на скриншот).

А, то при загрузке главной страницы

сайта http://xdan.ru/

в браузерах IE, Firefox и Opera происходит

автофокусировка ВСЕГО JS Объекта Document )))

Что приводит к визуальной потере вышестоЯщих анонсов.

Спасибо.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Елена76
+2 # Елена76 06.01.2014 16:38
или покороче:

name.focus();

name - id элемента

focus(); - метод устанавливающий фокус на элемент



или а трибуте указать

autofocus
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
master
0 # master 06.01.2014 16:43
Можно ли вернуть в поле курсор при определённом условии, не выделяя тескт имеющийся в поле, а просто установив курсор в конце, как бы фокус но не фокус
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 07.01.2014 21:39
var setCaretPos = function ( node,pos ) {
var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;
if(!node) {
return false;
}else if(node.createTextRange) {
var textRange = node.createTextRange();
textRange.collapse(true);
textRange.moveEnd(pos);
textRange.moveStart(pos);
textRange.select();
return true;
}else if(node.setSelectionRange) {
node.setSelectionRange(pos,pos);
return true;
}
return false;
};


ставим фокус, потом переводим каретку в конец поля

var input = document.getElementById('input-field');
input.focus();
setCaretPos(input,input.value.length)
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Абрамыч
-1 # Абрамыч 17.02.2015 11:14
Самый простой вариант
$('#ID_ВАШЕГО_ЭЛЕМЕНТА').focus();
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 17.02.2015 11:22
для этого на странице должна быть jquery или другая библиотека
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
animous
0 # animous 26.06.2015 05:16
А как можно переместить курсор в поле ввода Input по клику на ссылке якорь на данной странице?
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Viacheslav Soldatov
0 # Viacheslav Soldatov 02.11.2016 11:28
Вдруг кто искать будет: input type="text" autofocus value="value text" onfocus="this.value = this.value;"/
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Femil
0 # Femil 31.01.2017 07:16
Вроде все верно делаю, а получаю "Uncaught TypeError: Cannot read property 'focus' of null" (((
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору