Como você pode definir o foco para um elemento de entrada HTML sem ter todo o HTML?

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

  •  03-07-2019
  •  | 
  •  

Pergunta

Em primeiro lugar, o fundo: Eu estou trabalhando em tapeçaria 4, de modo que o HTML para qualquer página é costurado a partir de vários pedaços de HTML espalhadas por toda a aplicação. Para o componente que estou trabalhando eu não tenho a tag <body> por isso não posso dar-lhe um atributo onload.

O componente tem um elemento de entrada que as necessidades de foco quando a página é carregada. Alguém sabe uma maneira de definir o foco para a entrada de arquivo (ou qualquer outra entrada do tipo texto) no carregamento da página sem acesso à tag body?

Eu tentei inserir script para o corpo como
document.body.setAttribute('onload', 'setFocus()')
(onde setFocus é uma função definir o foco para o elemento de entrada de arquivo), mas que não funcionou. Eu não posso dizer que fiquei surpreso com isso embora.

EDIT:
Como já foi dito, eu, de fato, precisa fazer isso com um componente de página. Acabei de adicionar entradas de tipo de arquivo para o script que usamos para dar o foco para a primeira entrada editável e visível em uma página. Em pesquisando esse problema eu não encontrei quaisquer problemas de segurança com isso.

Foi útil?

Solução

Isso tem funcionado bem para mim: 

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

Outras dicas

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

deve ser útil eu acho !!!

você pode dar a janela um onload manipulador 

window.onload = setFocus;

Eu acho que você tem um problema fundamental com o seu encapsulamento. Embora na maioria dos casos, você pode anexar um manipulador de eventos para o evento onload - veja http: // ejohn .org / projetos / flexíveis-javascript-events / por John Resig de como fazer isso, setFocus precisa ser gerenciado por um componente página desde que você não pode ter dois componentes em sua página exigindo que eles obter o foco quando a página é carregada.

Tente jogo com tabstop atributo

Em primeiro lugar, o arquivo de entrada não é o mesmo que as outras entradas, você precisa manter isso em mente .... isso é por razões de segurança. Quando o arquivo de entrada obter o foco deve ser lido somente ou o navegador deve aparecer uma caixa de diálogo para escolher algum arquivo.

Agora, para as outras entradas que você poderia tentar algum evento onload em alguns dos seus elementos ... (não só o corpo ter o evento onload) ou você poderia usar javascript em linha no meio do html. Se você colocar o código javascript sem contar que é uma função que recebe executa enquanto o navegador lê-lo. Algo como: 

<script type="text/javascript">

function yourFunction()
{
   ...;
};

alert('hello world!");

yourFunction();

</script>

A função será executada após o alerta apenas quando o navegador lê-lo.

Se você pode, você deve usar jQuery para fazer o seu javascript. Isso fará com que o seu viver muuuuito muito fácil ....:)

Com jQuery poderia ser feito assim: 

$(function() {
    $("input:file").eq(0).focus()
})

Com javascript simples poderia ser feito assim: 

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();
}

Para a solução mais elaborada com javascript simples ver definir o foco para primeira entrada na página da Web em CodeProject.

A solução da Scunliffe tem uma vantagem usabilidade.

Quando os scripts de página estão carregando lentamente, chamando focus () a partir de "onLoad" evento faz uma página "salto" muito desagradável se usuário rola fora da página. Portanto, esta é uma abordagem mais amigável: 

<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top