Nesta carreira temos a oportunidade de "visitar" vários painéis de administração de websites. E, na leitura de mensagens, formulários de compra, e outros dados vindos de formulários preenchidos por clientes, notei vários duplicados e incompletos. Então, notei que é por causa do Enter.
Por que culpar o Enter? Não é bem o Enter, e sim o HTML. Todo Input de formulário, não importa se é o primeiro, intermediário ou último de um form, se é pressionado Enter quando o mesmo está em foco, o formulário é enviado (submit).
Isto é péssimo ao administrador, pois atrapalha muito na organização. Vamos ver como isso é facilmente bloqueado?
Apenas bloqueando
Vamos, primeiramente, apenas tornar o Enter sem ação em nosso formulário.
Então, devemos ter o seguinte no head da página:
E, em nossos campos de formulários, teremos sempre este atributo:
Ou seja, chamamos nossa função com o evento recente a cada tecla pressionada.
Pulando para o próximo campo
Em outras palavras, simularemos o efeito da tecla "TAB". Vamos usar um script que funciona em qualquer navegador, que foi desenvolvido por Ronnie T. Moore. Nosso head terá:
E colocamos o atributo a seguir em nossos inputs, configurando-o:
Ou seja, quando o campo for focado, definimos o nome do próximo campo. Se for o último, atribuímos "done". Assim, poderemos formar uma lógica no formulário.
Lembrando: não coloque estes atributos nos textareas ou buttons.
Até+!
Por que culpar o Enter? Não é bem o Enter, e sim o HTML. Todo Input de formulário, não importa se é o primeiro, intermediário ou último de um form, se é pressionado Enter quando o mesmo está em foco, o formulário é enviado (submit).
Isto é péssimo ao administrador, pois atrapalha muito na organização. Vamos ver como isso é facilmente bloqueado?
Apenas bloqueando
Vamos, primeiramente, apenas tornar o Enter sem ação em nosso formulário.
Então, devemos ter o seguinte no head da página:
Código HTML:
function enterNao(objEvent) { var tecla; // declaramos nula a variavel tecla tecla = objEvent.keyCode; // atribuimos o valor da tecla pressionada a variavel tecla if (tecla==13) { // se a tecla for enter return false; // removemos sua acao } else { // mas se nao for return true; // permitimos sua acao } } // fim da funcao
Código HTML:
onkeypress="return enterNao(event)"
Pulando para o próximo campo
Em outras palavras, simularemos o efeito da tecla "TAB". Vamos usar um script que funciona em qualquer navegador, que foi desenvolvido por Ronnie T. Moore. Nosso head terá:
Código HTML:
nextfield = "box1"; // colocamos aqui o nome do primeiro input da página netscape = ""; // definimos o valor nulo para a variável netscape para verificacoes posteriores ver = navigator.appVersion; len = ver.length; for(iln = 0; iln < len; iln++) if (ver.charAt(iln) == "(") break; netscape = (ver.charAt(iln+1).toUpperCase() != "C"); function keyDown(DnEvents) { // funcao principal // que navegador o cliente usa? k = (netscape) ? DnEvents.which : window.event.keyCode; if (k == 13) { // vish, é enter? if (nextfield == 'done') return true; // será que não foi o último campo? se for, podemos submitar mesmo assim else { // mas e se nao for? podemos focar o proximo campo! eval('document.yourform.' + nextfield + '.focus()'); return false; } } } document.onkeydown = keyDown; // aqui analisamos os eventos (teclas) if (netscape) document.captureEvents(Event.KEYDOWN|Event.KEYUP);
Código HTML:
onFocus="nextfield ='nome do proximo campo';"
Lembrando: não coloque estes atributos nos textareas ou buttons.
Até+!