Как можно установить фокус на элемент ввода HTML, не имея всего HTML?

StackOverflow https://stackoverflow.com/questions/808908

  •  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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top