JavaScript set focus to HTML form element

238

У меня есть веб-форма с текстовым полем в ней. Как мне по умолчанию настроить фокус на текстовое поле?JavaScript set focus to HTML form element

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

<body onload='setFocusToTextBox()'>

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

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

источник

2013-07-06 tenstar

+13

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

422

Сделайте это.

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

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

Ваш скрипт

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

источник

2013-07-06 07:21:02 mohkhan

Если идентификатор для текстового поля отсутствует, как это сделать? –

Вам придется сканировать документ, используя другие части веб-API (например, ['Document.forms'] (https://developer.mozilla.org/en-US/docs/Web/API/document.forms) , ['Document.getelementsByTagName'] (https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByTagName) или [' Node.childNodes'] (https: //developer.mozilla. org/en-US/docs/Web/API/Node.childNodes)) и либо полагаться на известную структуру документа, либо искать некоторые специфичные для элемента свойства. – peterph

+26

Или очевидный ответ ...дайте ему ID;) – Relevant

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

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

источник

2013-07-06 07:21:42 sipp

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

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

Проверьте, если это помогает.

источник

2013-07-06 07:25:28

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

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

106

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

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

источник

2013-07-06 07:30:03 zeroflagL

+35

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

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

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

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

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

источник

2014-12-22 15:22:28 Mac

AFAIK Form не имеет атрибута «name» – Marecky

У форм есть «имена» в течение длительного времени, а в HTML5 они все еще делают. См. Http://www.w3.org/TR/html5/forms.html#the-form-element – Mac

Если ваш код:

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

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

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

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

источник

2015-03-10 18:32:17

Я проигнорировал это, потому что в базовом вопросе удаленно не подразумевается jQuery. OP хотел остаться чисто javascript – Fallenreaper

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

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

Я использовал только для этого:

<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.

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

источник

2016-07-08 02:10:07

JavaScript set focus to HTML form element

ответ

Смежные вопросы