По тем или иным причинам не всегда есть возможность подключить к странице 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 и не парься..." 

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

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


Защитный код
Обновить

Комментарии   

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

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

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

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

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

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

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

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

name.focus();

name - id элемента

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



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

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