função focus não funciona no ultimo componente [RESOLVIDO]

Front-end
#1

Pessoal, bom dia!

Estou tentando usar a função focus em um objeto html, porém quando o cursor vai para a barra do url essa função não funciona.
Esse problema acontece quando o evento é disparado no ultimo componente do DOM, isso faz com que ele passe o focus para a barra de url, e impendindo o javascript de funcionar.

alguem sabe um macete para isso?

vlw!

#2

Olá mauricioadl

Deixa eu ver se entendi…
Você quer que quando o foco for para a URL, ele mude imediatamente para outro elemento html?

não entendi a parte em que o javascript é impedido de funcionar…

poste um trecho do seu código aqui para que possamos entender melhor :smiley:

#3

a ideia eh o seguinte:
tenho inputText dentro de um dataTable que quando é alterado o valor, ele envia para o ManagedBean faz algumas operações e adiciona uma nova linha do dataTable, entao capturo o sucesso do evento e posiciono o cursor no primeiro inputText da nova linha. ate ae tudo bem, mas se a dataTable for o ultimo componente da tela, logo o ultimo inputText tambem sera o ultimo, fazendo com que o tab do usuario posicione o cursor na URL e o javascript nao surte efeito.

entendeu?

segue os codigos:

ultima coluna do dataTable

<p:column headerText="Telefone">
						<h:inputText id="telefone" value="#{contato.telefone}">
							<p:ajax update="@form" event="change"
								listener="#{contatoController.update}"
// se der sucesso, posiciona no inputText com id nome, na nova linha
								onsucess="nextFocus('#{p:component('nome')}')" />
						</h:inputText>
					</p:column>

funcao javascript que posiciona o cursor


function nextFocus(elementName) {
	reg = /\d/;
	num = reg.exec(elementName);
	if (num) {
		elementName = elementName.replace(num, parseInt(num) + 1);
		element = document.getElementById(elementName);
		element.focus();
	}
}
#4

Acho que entendi :smiley:

será que o problema não tá na função js?

acho que ele não tá encontrando o elemento que tem o id = elementName

só para fazer um teste, tente verificar se a instrução:

retorna algum elemento, tipo assim:

function nextFocus(elementName) { reg = /\d/; num = reg.exec(elementName); if (num) { elementName = elementName.replace(num, parseInt(num) + 1); var element = document.getElementById(elementName); if(element) { element.focus(); } else { alert(elementName); } } }

provavelmente o script tá quebrando porque a variavel element está == null e quando vc tenta chamar o metodo .focus(), ele não encontra nada e dá uma exceção

Só para saber se é uma exception mesmo, tente o script:

function nextFocus(elementName) { reg = /\d/; num = reg.exec(elementName); if (num) { elementName = elementName.replace(num, parseInt(num) + 1); var element = document.getElementById(elementName); try { element.focus(); } catch(ex) { alert(ex); } } }

Vc conhece o firebug do firefox? dá pra debugar javascript com ele de uma forma bem legal, em vez de ficar dando esses alert() em todo lugar

testa ai e reporta para a gente o resultado, ou caso não seja nada disso, estamos ai para tentar ajudar :smiley:

#5

provavelmente isso acontece, ja que o elemento que ele procura pode nao estar na tela ainda. vou testar esse firebug pra ver.

vlw dica

#6

Pesquisa sim, ele é show de bola :smiley:

dá uma olhada no link deles na parte de javascript:
http://getfirebug.com/javascript

mas ele faz muito mais do que depurar javascript, ele uma ferramenta completa para desenvolvimento do front-end da sua aplicação web.

Acredito eu que todo navegador atual tenha uma ferramenta de desenvolvimento acoplada, experimenta apertar a tecla F12 no Chrome ou no IE (versão 7 em diante), vai aparecer um “painel para desenvolvedores” abaixo da tela.
só o firefox é que tem que instalar o complemento firebug, mais na minha opinião, ele é o melhor porque tem como você adicionar plugins ao firebug e ele fica completo!

depois que o IE incorporou esse painel para desenvolvedores, nunca mais tivemos problemas onde algo rodava no firefox/Chrome e não rodava no IE, porque bastava depurar o javascript e o erro era encontrado fácil fácil.

#7

thiago a dica foi otima, usei o do chrome mesmo, por ja estar instalado em meu pc. rss

o codigo javascript eh executado perfeitamente, soh que nao surte efeito porque o cursor esta na URL. eh como se lah fosse outra aplicacao.

fiz um teste basicão e comprovei a teoria. tipo:

<input type="text" id="txt" /> <input type="text" id="txt2" onblur="txt.focus()"/>

se der um TAB no txt2 e ele for o ultimo item da tela o foco NÃO vai para txt, vai para a url e fica lah.

a solução vai ser jogar algum componente no final da pagina sem valor nenhum, pra contornar o bug.

POG detected! hehehehe

vlw ajuda!!!

#8