Ir para conteúdo

POWERED BY:

Arquivado

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

Martinsrj

Formulário ASP - Desativar o enter

Por , em Javascript

Recommended Posts

Martinsrj    0

Martinsrj
Postado

Olá pessoal, boa tarde!

Possuo um formulário e o usuario tem a mania de clicar no Enter ao invés de Tab para passar de um campo para o outro e com isso é feito o cadastro indesejado.

Como que eu posso desativar o enter?

Abraços.

 

Segue o código:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulário de Cadastro.</title>
</head>

<body>
<form action="cadastro.asp" method="POST" id="form1" name="form1" >

<p>Razão Social:<br />
    	<input type="text" class="input" name="razao" id="razao" size="50" /></p>
  	<p>CNPJ/CPF:<br />
    	<input type="text" class="input" name="cnpj_cpf" id="cnpj_cpf" size="15" /></p>
	<p>Login:<br />
    	<input type="text" class="input" name="login" id="login" size="15" /></p>
	<p>Senha:<br />
    	<input type="text" class="input" name="senha" id="senha" size="15" /></p>
	<p>Logradouro:<br />
    	<input type="text" class="input" name="logradouro" id="logradouro" size="35" /></p>
	<p>CEP:<br />
      <input type="text" class="input" name="cep" id="cep" size="10" />
  </p>
	<p>Bairro:<br />
	  <input type="text" class="input" name="bairro" id="bairro" size="20" />
	</p>
	<p>UF:<br />
	  <input type="text" class="input" name="uf" id="uf" size="5" maxlength="2"/>
	</p>
<p>E-Mail:<br />
    	<input type="text" class="input" name="email" id="email" size="20" /></p>
	<p>Número Contrato:<br />
    	<input type="text" class="input" name="contrato" id="contrato" size="15" /></p>

  <p><input name="Enviar" type="submit" id="Enviar" value="Enviar" /></p>

</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

desisto    0

desisto
Postado

so em JS

 

correção

 

você pode desabilitar o enter de um form retirando a action, ou com um submit return false

 

mas pular campos so com JS

Compartilhar este post

Link para o post
Compartilhar em outros sites

Martinsrj    0

Martinsrj
Postado

Verifiquem por gentileza se dessa forma é a correta ou se tem como melhorar o meu código:

<script LANGUAGE="JavaScript">
function tecla_enter() 
{
	if (event.keyCode==13){
		 event.keyCode=9;
	}
}
document.onkeydown=tecla_enter;
</SCRIPT>
Queria que funcionasse o enter apenas quando o usuario estivesse com o cursor no ultimo campo do formulario.

Exemplo: o meu ultimo campo é esse: <input type="text" class="input" name="contrato" id="contrato" size="15" /> então quando o usuario acabar de digitar e clicar na tecla enter o submit funcionasse.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dee    0

Dee
Postado

Cria uma função que verifica se enquanto todos os campos nao forem preenchidos bloqueie o botão enter.

O comando é assim para desabilitar o botao:

 

document.form1.Enviar.disabled = true;

Quando preencher tudo:

[/code]

document.form1.Enviar.disabled = false;

[/code]

 

você pode chamar a função no ultimo Campo, pelo evento OnBlur (quando sair do foco, verifica se todos os campos obrigatórios estão preenchidos, se tiver ele vai desabilitar o botao)

Compartilhar este post

Link para o post
Compartilhar em outros sites

augustoclaro    2

augustoclaro
Postado

Olá, segute o código que desativa o enter:

 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulário de Cadastro.</title>
<script src="js/jquery.js"></script>
<script>
$('.input').keypress(function(event) {
  if (event.keyCode == '13') {
     return false;
   }
});
</script>
</head>

<body>
<form action="cadastro.asp" method="POST" id="form1" name="form1" >

<p>Razão Social:<br />
        <input type="text" class="input" name="razao" id="razao" size="50" /></p>
        <p>CNPJ/CPF:<br />
        <input type="text" class="input" name="cnpj_cpf" id="cnpj_cpf" size="15" /></p>
        <p>Login:<br />
        <input type="text" class="input" name="login" id="login" size="15" /></p>
        <p>Senha:<br />
        <input type="text" class="input" name="senha" id="senha" size="15" /></p>
        <p>Logradouro:<br />
        <input type="text" class="input" name="logradouro" id="logradouro" size="35" /></p>
        <p>CEP:<br />
      <input type="text" class="input" name="cep" id="cep" size="10" />
  </p>
        <p>Bairro:<br />
          <input type="text" class="input" name="bairro" id="bairro" size="20" />
        </p>
        <p>UF:<br />
          <input type="text" class="input" name="uf" id="uf" size="5" maxlength="2"/>
        </p>
<p>E-Mail:<br />
        <input type="text" class="input" name="email" id="email" size="20" /></p>
        <p>Número Contrato:<br />
        <input type="text" class="input" name="contrato" id="contrato" size="15" /></p>

  <p><input name="Enviar" type="submit" id="Enviar" value="Enviar" /></p>

</form>
</body>
</html>

Você só precisa do jquery para funcionar.

 

Não precisa alterar o formulário pois como você já tinha a class input em todos os campos e a reaproveitei.

 

espero ter ajudado =D

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

nota:

 

também não precisava da classe, dava para aplicar a função pelo elemento, trocando:

$('.input')
por: 
$('input')

sugiro essa mesma 'limpeza' de seletores para o CSS também.

Gastar código desnecessariamente é um prejuizo a longo prazo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Martinsrj    0

Martinsrj
Postado

Augusto, William quero fazer uma pergunta. O Código que vcs mencionaram em jquery ele desabilita e no ultimo campo ao terminar de digitar o enter cai no botão submit?

O código que eu criei no inicio o enter passar por todos os campos e nao cai no botão, mas a minha intenção é que caia no botão apenas quando o ultimo campo for preenchido.

 

Desde já agradeço pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não cara, ai vai precisar de uma coisinha um pouco mais sofisticada.. veja:

<html><head>	<title></title>	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	<script type="text/javascript">	$(document).ready(function(){		var n_inputs = $('input').length;		var last_input = $('input').eq( n_inputs-2 );//o ultimo mesmo é o submit				$('input').not( $(last_input) ).keydown(function( e ){			if( e.keyCode==13 )			{				$( this ).parent('label').next('label').find('input').focus();				return false;			}		});	});	</script>	<style type="text/css">	label { display: block; }	</style></head><body>	<form action="" method="get">		<label>Nome: <input type="text" name="nome" /></label>		<label>Idade: <input type="text" name="idade" /></label>		<label>Último Campo: <input type="text" name="ultimo" /></label>				<label><input type="submit" name="ok" value="ok" /></label>	</form>	</body></html>
dessa forma, eu informo para aplicar a função que desativa o Enter dentro dos inputs, apenas nos inputs que não forem o penultimo input, pois logicamente, o ultimo é o próprio submit.

 

Se você tiver mais forms na página, vai precisar melhorar esse seletor

Mas a 'parte dificil' tá ai Imagem Postada

 

-> O Enter passa de input, em vez de dar submit

-> se chegar no ultimo text a ser preenchido, ele realiza o submit do form.

 

edit, melhorando os seletores:

var n_inputs = $("input[type='text']").length;		var last_input = $("input[type='text']").eq( n_inputs-1 );

Compartilhar este post

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

Informação importante

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

  Aceito