Off: Javascript - simular tecla TAB onfocus
William G. Comnisky
Em javascript, como posso fazer para quando um campo receber o foco,
simular o uso da tecla tab? O que quero fazer é justamente pular para o
próximo campo, porém, não posso utilizar IDs, pois o formulário é gerado
na hora, e pode haver n campos, com n IDs.
Se conseguir enviar apenas o TAB para pular campo funciona. Tentei:
onfocus="this.value='\t'"
mas ele literalmente colocam um 'espaço tabulado' dentro do campo.
Grato
Kico Zaninetti
function saltacampo(campo) {
//pega todos os inputs de campo.form e joga num array
//varre o array até achar o input atual (campo)
//dá um focus no próximo elemento do array
}
e no formulário usa um <input onfocus='saltacampo(this)'>
Entendeu a lógica da coisa?
--
Kico Zaninetti
carpe diem
William G. Comnisky
Ja tinha essa opção, mas não tem algo mais simples?
Kico Zaninetti escreveu:
> William, você vai ter que fazer uma função que faz o seguinte:
>
> function saltacampo(campo) {
>
> //pega todos os inputs de campo.form e joga num array
>
> //varre o array até achar o input atual (campo)
>
> //dá um focus no próximo elemento do array
>
> }
>
> e no formulário usa um <input onfocus='saltacampo(this)'>
>
> Entendeu a lógica da coisa?
>
> --
> Kico Zaninetti
> carpe diem
>
>
> On 5/23/07, *William G. Comnisky* <w.com...@gmail.com
Kico Zaninetti
Cara, pode até ser que tenha, mas eu não sei de nada específico que faça essa tarefa automaticamente. Essa função aí foi o que eu pensei que dava pra fazer usando DOM.
Se você conseguir alguma coisa mais simplificada, posta aqui pq tbem me interessa!
--
Kico Zaninetti
carpe diem
William G. Comnisky
Como não consegui, acabei fazendo com DOM mesmo, com ajuda da Prototype.
Valeu
Kico Zaninetti escreveu:
> Fala William!
>
> Cara, pode até ser que tenha, mas eu não sei de nada específico que faça
> essa tarefa automaticamente. Essa função aí foi o que eu pensei que dava
> pra fazer usando DOM.
>
> Se você conseguir alguma coisa mais simplificada, posta aqui pq tbem me
> interessa!
>
> --
> Kico Zaninetti
> carpe diem
>
> On 5/23/07, *William G. Comnisky* <w.com...@gmail.com
> <mailto:w.com...@gmail.com>> wrote:
>
>
> Fala Kico,
>
> Ja tinha essa opção, mas não tem algo mais simples?
>
> Kico Zaninetti escreveu:
> > William, você vai ter que fazer uma função que faz o seguinte:
> >
> > function saltacampo(campo) {
> >
> > //pega todos os inputs de campo.form e joga num array
> >
> > //varre o array até achar o input atual (campo)
> >
> > //dá um focus no próximo elemento do array
> >
> > }
> >
> > e no formulário usa um <input onfocus='saltacampo(this)'>
> >
> > Entendeu a lógica da coisa?
> >
> > --
> > Kico Zaninetti
> > carpe diem
> >
> >
> > On 5/23/07, *William G. Comnisky* <w.com...@gmail.com
> <mailto:w.com...@gmail.com>
Gustavo Soares
valew
--
Gustavo Soares
Gerente de Tecnologia
inMedia Host - Alta Tecnologia e Infra-estrutura para o seu site!
MSN: gusta...@pop.com.br
GTalk: euusolinux
Fone: [34] 9197-5735 - Uberlandia-MG
** Pra que usar janela se existe a porta? Abra a cabeça, use Linux ! **
William G. Comnisky
Como disse anteriormente, usei a biblioteca javascript Prototype como
base de acesso aos objetos via DOM: http://www.prototypejs.org/
O que fiz foi colocar a função proximoCampo(this) no evento onfocus do
input que não quero que receba foco. Abaixo de tudo, tem o html da
tabela com os inputs, pra possibilitar o entendimento.
Como esses campos encontram-se dentro de uma célula de tabela (td),
preciso subir 2 níveis (pense hierarquicamente nos objetos:
html>body>table>tr>td>input). E sim, dois níveis, pois o evento que
dispara a função está no input.
Com up() ou up(0), eu ficaria no nível da célula (td).
Com up(1), fico no nível da linha da tabela (tr).
Notaram que com up(1) ele sobe dois níveis? A contagem inicia o zero:
up(0) ou apenas up() é subir 1 nível.
Ao dar um next(), pulo para o próximo objeto de mesmo nível hierárquico,
que é a próxima tr. Down(1) entra mais 2 níveis. Next(4) fará o salto
para o quinto objeto (td). Down() vai pegar o próximo objeto dentro da td.
Verifico se realmente é os inputs que preciso (atraves das 4 primeiras
letras do id), e executo o foco.
function proximoCampo(campoAtual)
{
if($(campoAtual.id).up(1).next().down(1).next(4).down())
{
var proxCampo = \$(campoAtual.id).up(1).next().down(1).next(3).down();
if (proxCampo.id.substring(0,4) == 'qtd[')
{
proxCampo.focus();
}
}
}
Eis o código:
<table>
<tbody>
<tr
<td>Produto</td>
<td>Categoria</td>
<td>Cod. AlfhaPeças</td>
<td>Cód. Referente</td>
<td>Preço/Un (R$)</td>
<td>Qtde</td>
<td>Total</td>
</tr>
<tr>
<td>test</td>
<td>teste</td>
<td>1</td>
<td>1</td>
<td>1,50</td>
<td>
<input type="text" id="qtd[63]" name="qtd[63]" />
</td>
<td>
<input type="text" id="total[63]" name="total[63]"
onfocus="proximoCampo(this);" />
</td>
</tr>
<tr>
<td>test</td>
<td>teste</td>
<td>2</td>
<td>2</td>
<td>2,50</td>
<td>
<input type="text" id="qtd[68]" name="qtd[68]" />
</td>
<td>
<input type="text" id="total[68]" name="total[68]"
onfocus="proximoCampo(this);" />
</td>
</tr>
</tbody>
</table>
Lauro Becker
Estou acompanhando a conversa e eis que preciso implementar um efeito de TAB quando pressiono ENTER.
Acho uma solução mais elegante, definir os atributos tabindex para seus fields. Então, eu simplesmente faço algo do tipo:
field.onkeypress = function(event){
if(tecla == 10 || tecla == 13){
for(var k = 0; k < todosFields.length; k++){
break;
return false; //no caso, para não submeter meu formulário
Espero que seja útil! ;-)
Fica minha humilde contribuição.
Até mais.
--
Lauro L. V. Becker
---------------------------
Celular: (54) 8126 7948
MSN: lau...@hotmail.com
William G. Comnisky
incremento do 'id' do tabindex, porém as linhas da tabela são criadas
dinamicamente, ficando realmente sem ordem.
Por exemplo: tenho inicialmente três na tabela. Os ids de tabindex vão
de 1 a 3. Se eu criar uma nova linha entre a linha 1 e 2, ja complica.
Eu teria de recorrer todas linhas e atribuir novos tabindexes a todos
campos.
Lauro Becker escreveu:
> Olá, amigos.
>
> Estou acompanhando a conversa e eis que preciso implementar um efeito de
> TAB quando pressiono ENTER.
> Acho uma solução mais elegante, definir os atributos tabindex para seus
> fields. Então, eu simplesmente faço algo do tipo:
>
> field.onkeypress = function(event){
> var tecla = event.keyCode;
> if(tecla == 10 || tecla == 13){
> var todosFields = document.getElementsByTagName ("input");
> for(var k = 0; k < todosFields.length; k++){
> if(todosFields[k].getAttribute("tabindex") ==
> (parseInt(this.getAttribute("tabindex")) + 1)){
> todosFields[k].focus();
> break;
> }
> }
> }
>
> return false; //no caso, para não submeter meu formulário
> }
>
> Espero que seja útil! ;-)
> Fica minha humilde contribuição.
>
> Até mais.
>
> Em 24/05/07, *William G. Comnisky* < w.com...@gmail.com
> <mailto:w.com...@gmail.com>> escreveu:
> MSN: lau...@hotmail.com <mailto:lau...@hotmail.com>
> >