По тем или иным причинам не всегда есть возможность подключить к странице 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 14:41
Leroy, не могли бы Вы убрать форму

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

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

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

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

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

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

Спасибо.
Ответить | Ответить с цитатой | Цитировать
Leroy
0 # Leroy 02.04.2013 16:30
спасибо, поправил
Ответить | Ответить с цитатой | Цитировать
Елена76
+2 # Елена76 06.01.2014 20:38
или покороче:

name.focus();

name - id элемента

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



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

autofocus
Ответить | Ответить с цитатой | Цитировать
master
0 # master 06.01.2014 20:43
Можно ли вернуть в поле курсор при определённом условии, не выделяя тескт имеющийся в поле, а просто установив курсор в конце, как бы фокус но не фокус
Ответить | Ответить с цитатой | Цитировать
Leroy
0 # Leroy 08.01.2014 01: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 14:14
Самый простой вариант
$('#ID_ВАШЕГО_ЭЛЕМЕНТА').focus();
Ответить | Ответить с цитатой | Цитировать
Leroy
0 # Leroy 17.02.2015 14:22
для этого на странице должна быть jquery или другая библиотека
Ответить | Ответить с цитатой | Цитировать
animous
0 # animous 26.06.2015 08:16
А как можно переместить курсор в поле ввода Input по клику на ссылке якорь на данной странице?
Ответить | Ответить с цитатой | Цитировать
Viacheslav Soldatov
0 # Viacheslav Soldatov 02.11.2016 14:28
Вдруг кто искать будет: input type="text" autofocus value="value text" onfocus="this.value = this.value;"/
Ответить | Ответить с цитатой | Цитировать
Femil
0 # Femil 31.01.2017 10:16
Вроде все верно делаю, а получаю "Uncaught TypeError: Cannot read property 'focus' of null" (((
Ответить | Ответить с цитатой | Цитировать