Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Daniel V. Souza

[Resolvido] Bloquear input para quando eu der TAB não seleci

Por , em Desenvolvimento frontend

Recommended Posts

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Mas qual será a utilidade deste input? Imagem Postada Pois, a única forma de se bloquear o acesso ao input, seja ele via tab ou via clique mesmo, é definir um disabled, mas com isso, ao submeter o formulário, este campo não será enviado...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel V. Souza    0

Daniel V. Souza
Postado

Imagem Postada

Seguinte o "Total Produto" gostaria que ficasse "inselectivel" WTFFF o.0 haeuhauehaeauh essa doeo.

tipo ele altera sempre que a quantidade muda etc... então precisa ficar em um input type:text =]

só que como voce disse seer disable ele não será enviado quando eu "submitar" o form.

 

Mas se não tiver como sem problema =]

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

por isso que existe o atributo readonly

 

se você quiser que o input não seja editavel, mas seja enviado, use readonly

a brincadeira é não deixar editar ? ou não ir nele qndo você der TAB?

 

 

não deixar editar, resolve com o readonly

não 'ir nele' qndo der TAB, resolve, dando focus() no proximo Imagem Postada

 

dispare uma função no onfocus(), desse input, q mude o focus() para o proximo.. assim ele 'nunca' ganhará foco.(na verdade, você não verá isso acontecer)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Pois é, como o Willian disse, o readonly é o recomendável nessa situação, mas o input é focado mesmo assim. Entretanto, existe uma possibilidade: utilize o tabindex! Sendo assim, deixe o tabindex desse inout por último, e ele só seria focado após o último campo do formulário (ou botão)...

 

Exemplo:

<form action="process.php" method="post">    <fieldset>        <input type="text" name="exemplo1" tabindex="1" />        <br />        <input type="text" name="exemplo2" tabindex="2" />        <br />        <input type="text" name="exemplo3" tabindex="3" />        <br />        <input type="text" name="exemplo4" tabindex="5" readonly="readonly" /> <= Este aqui seria o seu input em questão        <br />        <button type="submit" tabindex="4">Enviar</button>    </fieldset></form>
Neste exemplo, seu campo só seria focado após o "tab" quando o cursor estiver sobre o botão "Enviar"... Pode ser uma solução para você...

 

:joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo doque eu tinha sugerido:

<html><head><script type="text/javascript">function id( el ){	return document.getElementById( el );}function no_focus( el ){	id( el ).focus();}window.onload = function(){	id('exemplo4').onfocus = function(){		no_focus( 'exemplo1' );	}}</script><style type="text/css">label{ display: block; }</style></head><body>	<form action="process.php" method="post">	<fieldset>		<label>Exemplo 1 <input type="text" name="exemplo1" id="exemplo1" /></label>		<label>Exemplo 2 <input type="text" name="exemplo2" /></label>		<label>Exemplo 3 <input type="text" name="exemplo3" /></label>		<label>Exemplo 4 <input type="text" name="exemplo4" readonly="readonly" id="exemplo4" /> <= Este aqui seria o seu input em questão</label>		<label><input type="submit" name="enviar" value="enviar" /></label>	</fieldset></form></body></html>
veja que ao chegar no Exemplo 3, o focus do proximo tab, volta para o Exemplo1, mas você poderia desviar para qq lugar.. apenas informando para onde, no parâmetro da função.

 

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

IvanNildo    0

IvanNildo
Postado

William eu to tendo certa dificuldade em aprender javascript... não sei mto bem o pq mas enfim kkk

 

será que você poderia me explicar o que cada parte da sua função faz? Pq eu não entendi mto bem... se você puder explicar cada "linha" dela eu ficaria muito grato!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

sou ruinzinho pra explicar.. mas vamos tentar..

 

primeiro eu criei uma função de 'apelido' para o padrão DOM: document.getElementById()

function id( el ){
        return document.getElementById( el );
}
pois é muito chato ficar escrevendo isso toda hora... imagina..

 

var menu = document.getElementById('menu');
var lateral = document.getElementById('lateral');
var conteudo = document.getElementById('conteudo');
fica 'extenso' ne?!

então, com a 'função apelido' id()

 

posso fazer o mesmo, com menos repetição de código:

var menu = id('menu');
var lateral = id('lateral');
var conteudo = id('conteudo');
mais curto ne?!

 

e ai eu fiz uma função:

function no_focus( el ){
        id( el ).focus();
}
'sem foco', pois no elemento que ela for chamada, ela vai chamar o focus()(método nativo), de outro elemento..

 

window.onload = function(){//aguardo o DOM carregar completamente
        id('exemplo4').onfocus = function(){//aplico uma função no evento onfocus(), do elemento #exemplo4
                no_focus( 'exemplo1' );//jogo o foco para outro lugar, chamando a função que declarei acima
        }
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ixi... hehe

 

melhor eu começar a fazer um tutorial de javascript..

 

function id( el ){}

 

o el é o parâmetro da função...

function hi( nome ){
   alert( 'Oi '+nome );
}
ai as chamadas:

hi( 'William' );
hi( 'Bruno' );
viu ?

 

o parâmetro, nome, é uma variável, que vem de fora, e passa para o escopo da função...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito