Как можно установить фокус на элемент ввода HTML, не имея всего HTML?
-
03-07-2019 - |
Вопрос
Сначала предыстория:Я работаю в Tapestry 4, поэтому HTML для любой страницы сшивается из различных фрагментов HTML, разбросанных по всему приложению.Для компонента, над которым я работаю, у меня нет <body>
тег, поэтому я не могу дать ему onload
атрибут.
Компонент имеет элемент ввода, который требует фокуса при загрузке страницы.Кто-нибудь знает способ установить фокус на ввод файла (или любой другой текстовый ввод) при загрузке страницы без доступа к тегу body?
Я пробовал вставить скрипт в тело, напримерdocument.body.setAttribute('onload', 'setFocus()')
(где setFocus — это функция, устанавливающая фокус на элемент ввода файла), но это не сработало.Хотя не могу сказать, что меня это удивило.
РЕДАКТИРОВАТЬ:
Как уже было сказано, мне действительно нужно сделать это с компонентом страницы.В итоге я добавил входные данные типа файла в сценарий, который мы используем для фокусировки на первом редактируемом и видимом вводе на странице.Исследуя эту проблему, я не обнаружил никаких проблем с безопасностью при этом.
Решение
Это сработало для меня:
<script>
function getLastFormElem(){
var fID = document.forms.length -1;
var f = document.forms[fID];
var eID = f.elements.length -1;
return f.elements[eID];
}
</script>
<input name="whatever" id="maybesetmaybenot" type="text"/>
<!-- any other code except more form tags -->
<script>getLastFormElem().focus();</script>
Другие советы
<script>
window.onload = function() {
document.getElementById('search_query').select();
//document.getElementById('search_query').value = '';
// where 'search_query' will be the id of the input element
};
</script>
думаю будет полезно!!!
вы можете дать окну обработчик загрузки
window.onload = setFocus;
Я думаю, что у вас есть фундаментальная проблема с инкапсуляцией.Хотя в большинстве случаев к событию onload можно прикрепить обработчик событий — см. http://ejohn.org/projects/flexible-javascript-events/ Джон Ресиг о том, как это сделать, setFocus должен управляться компонентом страницы, поскольку на вашей странице не может быть двух компонентов, требующих, чтобы они получали фокус при загрузке страницы.
Попробуйте поиграть с табуляция атрибут
Прежде всего, входной файл не похож на другие входные данные, вам нужно это иметь в виду....это из соображений безопасности.Когда входной файл получает фокус, он должен быть доступен только для чтения, или браузер должен открыть диалоговое окно для выбора какого-либо файла.
Теперь для других входных данных вы можете попробовать какое-то событие загрузки для некоторых ваших элементов... (событие загрузки есть не только в теле) или вы можете использовать встроенный javascript в середине html.Если вы помещаете код JavaScript, не сообщая, что это функция, которая выполняется, пока браузер ее читает.Что-то вроде:
<script type="text/javascript">
function yourFunction()
{
...;
};
alert('hello world!");
yourFunction();
</script>
Функция будет выполнена после оповещения, когда браузер его прочитает.
Если можете, вам следует использовать jQuery для выполнения JavaScript.Это сделает вашу жизнь намного проще....:)
С jQuery можно было бы сделать так:
$(function() {
$("input:file").eq(0).focus()
})
С помощью простого javascript можно сделать следующее:
var oldWindowOnload = window.onload; // be nice with other uses of onload
window.onload = function() {
var form = document.forms[0];
for(i=0; i < form.length; i++) {
if (form[i].type == "file") {
form[i].focus();
}
}
oldWindowOnload();
}
Более сложное решение с простым javascript см. Установить фокус на первый ввод на веб-странице на КодПроекте.
Решение Сканлиффа имеет преимущество в удобстве использования.
Когда сценарии страниц загружаются медленно, вызов focus() из события «onLoad» приводит к очень неприятному «прыжку» страницы, если пользователь прокручивает страницу.Итак, это более удобный подход:
<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>