JavaScript установил фокус на элемент формы HTML

332

У меня есть веб-форма с текстовым полем. Как мне установить фокус на текстовое поле по умолчанию?

Что-то вроде этого:

<body onload='setFocusToTextBox()'>

так кто-нибудь может мне помочь с этим? Я не знаю, как установить фокус на текстовое поле с помощью JavaScript.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>

javascript html textbox focus tenstar
источник

21

Так же просто, как document.getElementById('your_text_box_id').focus();.

Теему

576

Сделай это.

Если ваш элемент что-то вроде этого ..

<input type="text" id="mytext"/>

Ваш сценарий будет

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>

mohkhan
источник

3

Вам придется сканировать документ с использованием других частей веб-API (например Document.forms, Document.getelementsByTagNameили Node.childNodes) и либо полагаться на известную структуру документа, либо искать некоторые специфические для элемента свойства.

Петер

40

Или очевидный ответ ... дайте ему удостоверение личности;)

Соответствует

4

Я бы посоветовал не использовать идентификатор, потому что он переопределен. Вместо этого используйте имя или даже класс. В этом случае вы должны использовать document.querySelector ("[name = 'myText']") или document.querySelector (". MyText"), чтобы получить ссылку на элемент ввода.

Крис Лав

12

@ChrisLove Интересный совет. Почему идентификатор слишком «задан» и в чем проблема? Это проще, точнее, и код для его определения будет немного быстрее, с идентификатором. Для меня это звучит как самая очевидная и разумная вещь, если это возможно.

PandaWood

4

@ChrisLove - это не чрезмерная спецификация селектора CSS, это установка атрибута HTML ID - специфичность - это проблема в способе обработки CSS при разборе селекторов DOM, а не проблема того, как атрибуты ID и класса работают в HTML. Не рекомендуется использовать те же селекторы DOM для присоединения CSS, как и для присоединения JS, что означает, что вы можете поддерживать описанную вами дифференциацию

Тони Ли

142

Для чего это стоит, вы можете использовать autofocusатрибут в HTML5-совместимых браузерах. Работает даже на IE начиная с версии 10.

<input name="myinput" value="whatever" autofocus />

лучший Оливер
источник

51

Имейте в виду, что это работает только для установки фокуса при первой загрузке страницы; его нельзя использовать для настройки фокуса позже в ответ на ввод.

Мартин Карни

Боюсь, что атрибут автофокуса не совместим, если IOS Safari ( caniuse.com/#search=autofocus ) в то время как .focus () просто несовместим с Opera Mini ( caniuse.com/#search=focus )

lfrodrigues

3

Обратите внимание, что если вы пытаетесь сфокусироваться с консоли, это невозможно!

Или Чобан

65

Обычно, когда мы фокусируемся на текстовом поле, мы также должны прокручивать в поле зрения

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

Проверьте, поможет ли это.

Хан к
источник

2

Это может быть настоящей головной болью на меньшем экране, если поле находится за пределами экрана :-)

Тони Ли

Если у вас есть фиксированная строка заголовка, вам может понадобиться использовать textbox.scrollIntoView (false), это просто устанавливает элемент внизу, а не вверху.

DeadlyChambers

30

Если ваш код:

<input type="text" id="mytext"/>

И если вы используете JQuery, вы также можете использовать это:

<script>
function setFocusToTextBox(){
    $("#mytext").focus();
}
</script>

Имейте в виду, что вы должны сделать вход в первую очередь $(document).ready()

Ричард Ребеко
источник

11

Я отказался от этого, потому что в базовом вопросе нет никакого смысла в jQuery. ОП хотел остаться исключительно на JavaScript

Fallenreaper

11

Ну, у тебя есть причина, я ошибся, но я думаю, что это все равно полезно.

Ричард Ребеко

4

Я одобряю это, потому что в проектах, где jQuery уже используется и вы используете элементы как объекты выбора jQuery, лучше использовать согласованность, а не использовать vanilla JS.

Парадит

8

@Fallenreaper Downvotes для egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect, согласно справочному центру stackoverflow. Я не нахожу это рядом с этими категориями. Помощь не ограничивается ОП, не так ли?

Гелли Энн

@GellieAnn Хотя это и ответ, он находится за рамками вопроса ОП. Есть причина, по которой он использует ванильный javascript, и хотя вы можете упомянуть другие рамки и дать указатели или подсказки, чтобы привести их к одной, и дать причину, почему вы все равно должны решить ответ в рамках заданного вопроса. Поэтому я поддерживаю своего отрицательного голоса.

Fallenreaper

20

Для простого Javascript попробуйте следующее:

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};

SIPP
источник

3

Я просто использовал это:

<html>
  <head>
    <script type="text/javascript">
      function focusFieldOne() {
        document.FormName.FieldName.focus();
      }
    </script>
  </head>

  <body onLoad="focusFieldOne();">
    <form name="FormName">
      Field <input type="text" name="FieldName">
    </form>
  </body>
</html>

Тем не менее, вы можете просто использовать атрибут автофокуса в HTML 5.

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

RajnishCoder
источник

1

Как упоминалось ранее, document.forms тоже работает.

function setFocusToTextBox( _element ) {
  document.forms[ 'myFormName' ].elements[ _element ].focus();
}

setFocusToTextBox( 0 );
// sets focus on first element of the form

макинтош
источник

AFAIK Форма не имеет атрибута «имя»

Marecky

У форм уже давно есть «имена», а в HTML5 они все еще есть. См. W3.org/TR/html5/forms.html#the-form-element

Mac

1

Если ваш <input>или <textarea>имеет атрибут, id=mytextиспользуйте

mytext.focus();

Показать фрагмент кода

function setFocusToTextBox() {
    mytext.focus();
}

<body onload='setFocusToTextBox()'>
  <form>
    <input type="text" id="mytext"/>
  </form>
</body>

Развернуть фрагмент

Камил Келчевски
источник

0

window.onload - сначала установить фокус, onblur - установить фокус, когда вы щелкаете за пределами текстовой области, или избегать размытия текстовой области.

    <textarea id="focus"></textarea>
    <script>
     var mytexarea=document.getElementById("focus");
    window.onload=function()
    {

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>

ßãlãjî
источник

JavaScript установил фокус на элемент формы HTML

Ответы: