[Resolvido] Javascript em formulário dinâmico.

AlterC · Outubro 10, 2007

Olá pessoal! Sou novo no fórum!!! Há tempos estava afim de registrar-me no iMasters. Até que enfim!!!

Bom... o motivo desse tópico é um pedido de ajuda e amostra de um script bastante legal http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif . Peguei esse script em um outro fórum e ele faz o seguinte: Ele bloqueia a tecla "Enter" (- cod==13 -) independente do formulário ou dos componentes existentes. Geralmente vê-se que são declarados eventos como onkeypress diretamente no form. Até certo ponto isso resolve certos problemas de forma fácil e rápida. Mas a questão é: E quando você está trabalhando com formulários dinâmicos? E quer que esses formulários sejam independentes dos eventos? Como disparar um evento em um form que não exista? É isso o que o script faz. Olhem só:

<script>function rejeitaTecla(){		//By Micox - micoxjcg@yahoo.com.br - http://elmicox.blogspot.com	//Grande colaboração de bermonruf: http://bermonruf.wordpress.com	var oEvent=arguments[0];	//filtrando o evento	var oEvent = oEvent ? oEvent : window.event;	var tecla = (oEvent.keyCode) ? oEvent.keyCode : oEvent.which;		if(oEvent.type=="keydown" && navigator.appName.indexOf('Internet Explorer')<0 ){		return false;	}		for(var i=1; cod_tecla=arguments[i]; i++){		if (tecla == cod_tecla){			if (typeof(oEvent.preventDefault)=='function'){				oEvent.preventDefault();			} else {				oEvent.returnValue = false;				oEvent.keyCode = 0;			}		}	return false;}}function rejeitaTeclas(){	var tecla = 0;	var args_eval = "e, ";	for(var i=0; tecla=arguments[i]; i++)		{args_eval += tecla + ", ";}	args_eval += "0";	eval("document.onkeypress=function(e){rejeitaTecla("+args_eval+");}\n"+		"document.onkeydown=function(e){rejeitaTecla("+args_eval+");}");}rejeitaTeclas(13); //Aqui você bloqueia quantas teclas você quizer!!! Ex.: rejeitaTeclas(13, 115, 64);</script><form method="post">Telefone:<input type="text" name="nome"><input type="submit" value="Submeter"></form>

Reparem que no form não há nenhum evento disparado que faz com que a tecla ENTER seja bloqueada. Porém ela é, de fato, suprimida. Esse script funciona perfeitamente nos browser's I.E. V.6; I.E. V.7; FireFox e Opera. Achei que valia a pena colocar o código aqui, uma vez que ele é bastante útil. Detalhe: Ele bloqueia quantas teclas você quizer!!! É só declarar seus respectivos códigos na chamada "rejeitaTeclas"

Bom. A dúvida é: Existe uma maneira de adaptação desse código que faz com que eu libere o "Enter" apenas quando o foco está em um botão?

Outra dúvida é: Existe alguma forma de descobrir qual objeto está em foco usando esta função? Pois preciso saber quando o foco está no botão para poder submeter ou cancelar.

Script by Micox: micoxjcg@yahoo.com.br - Blog Do Micox!!! Enjoy!!!

And bermonruf: bermonruf - Blog Do bermonruf!!!

Bom... Tópico grande né? []'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

micox · Outubro 10, 2007

Opa, é nóis.

Fui djô quem fez este script heheh, valeus a citação aí (se quiser citar meu blog e meu email também logo após o nome http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif )

//By Micox - micoxjcg@yahoo.com.br - http://elmicox.blogspot.com

quanto às suas dúvidas: vai dar muito trabalho fazer todas estas adaptações que falou. O melhor seria re-escrever a função do zero.

Mas por que você precisa liberar o ENTER só em um botão?

AlterC · Outubro 10, 2007

Bom cara... Imaginemos a seguinte situação: Imagine que você é um usuário comum <_< ... Você está usando o programa e imputando dados. Quando chega no botão "SALVAR" você prefere apertar "ENTER" e submeter rapidamente ou ir com o mouse até o botão?

Se o usuário estiver imputando os dados e apertar sem querer a tecla "ENTER" ele vai submeter o formulário com os dados ainda não completos. Aí é questão de re-trabalho: Ter que editar o último registro para completar a entrada dos dados.

Assim fica tudo mais claro né? :)

Na verdade quero bloquear o "ENTER" pois o cliente utiliza o teclado numérico constantemente e, não muito raro, ele aperta submete sem querer.

Cara: Seu script ficou massa pra caramba. :D

Vou editar o post anterior :P

[]'s

micox · Outubro 15, 2007

ummm beleza. saquei.

Acho que a forma mais fácil que talvez dê certo seria fazendo uma gambiarra no keydown do botão limpando o document.onkeypress pro que estava originalmente antes da função rejeitaTeclas.

como o keydown acontece antes do keypress (acho) deve dar certo.

Ah, tira esta parte da função removeTeclas: "document.onkeydown=function(e){rejeitaTecla("+args_eval+");}"

Deve dar certo :)

//ps.: nos creditos da função, também teve uma ajudinha do bermonruf: http://bermonruf.wordpress.com/ que eu esqueci de falar :)

bimonti · Outubro 15, 2007

Semanticamente correto seria o enter funcionar como um tab nos campos, e como submit no formulário, e não bloquear de vez.

Para identificar o campo em foco, pode ser pelo id:

<button id="abc" onfocus="alert(this.id)">Botão</button>

Dependendo do que você precisar retornar do botão pode usar uma referência à árvore da página (DOM).

AlterC · Outubro 15, 2007

Bom... estarei a testar as sugestões agora à tarde. Postarei o resultado aqui. Se der certo (e creio que dará :D) a função será de grande ajuda nesses casos extremos né não? :)

Semanticamente correto seria o enter funcionar como um tab nos campos, e como submit no formulário, e não bloquear de vez.

Bimonti: Você está certo! Semanticamente isso seria o mais correto... é para isso que quero retornar o foco. A tecla ENTER terá um comportamento diferente de acordo com o componente em foco.

Para identificar o campo em foco, pode ser pelo id:

Ainda não tinha pensado em identificar o foco pelo id... Valeu pela sugestão!

---------------------------------------

//ps.: nos creditos da função, também teve uma ajudinha do bermonruf: http://bermonruf.wordpress.com/ que eu esqueci de falar

Micox: Vou atualizar os créditos ok? Cara... estou visitando o seu blog todo dia... curti demais o do bermonruf também... mais um pra lista...

---------------------------------------

Bom... vou testar tudo aqui e posto o resultado à tarde, ok?

[]'s

micox · Outubro 15, 2007

Pois é. O certo é o que o bimonti falou, só que aí tem que reescrever tudo novamente. esta função aí não vai ajudar não.

AlterC · Outubro 16, 2007

Pior que é verdade: Não deu certo... :unsure:

Sei não... mesmo assim vou continuar tentando... mesmo querendo desistir e pegar uma outra atividade...

Qualquer notícia eu aviso... http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

bimonti · Outubro 16, 2007

Ao iniciar a página:

window.onload = function(){  var fs = document.forms;  for(var x=0, y=fs.length; x<y; x++){	els = fs[x].elements;	for(var z=0, a=els.length; z<a;z++){	  if(els[z].addEventListener){		els[z].addEventListener('focus',função,false);	  }else{		els[z].attachEvent('onfocus',função);	  }	}  }}

Vai adicionar a função à todos os elementos de todos os formulários da página. Umas verificações seriam interessantes, como por exemplo, filtrar submits, ou usar um atributo como o "rel" (acho que não é valido pelo W3C) nos elementos para adicionar funções diferentes em tipos diferentes de campos, etc...

AlterC · Novembro 7, 2007

Galera!!! Desculpe a demora aí!!!

Podem fechar o tópico com RESOLVIDO!!! hahahaha!!!

De boa! Utilizei o script do Micox como estava mesmo!!!

Já dá pra resolver o nosso problema e dar um ar a mais de profissionalismo no sistema. :D

Caso hajam mais dúvidas abrirei um outro tópico, ok?

Valeu Micox!!!

Valeu muitão também Bimonti!!!

Abração!!!

Sandro_MF · Dezembro 30, 2007

Olá pessoal! Sou novo no fórum!!! Há tempos estava afim de registrar-me no iMasters. Até que enfim!!!

Bom... o motivo desse tópico é um pedido de ajuda e amostra de um script bastante legal http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif . Peguei esse script em um outro fórum e ele faz o seguinte: Ele bloqueia a tecla "Enter" (- cod==13 -) independente do formulário ou dos componentes existentes. Geralmente vê-se que são declarados eventos como onkeypress diretamente no form. Até certo ponto isso resolve certos problemas de forma fácil e rápida. Mas a questão é: E quando você está trabalhando com formulários dinâmicos? E quer que esses formulários sejam independentes dos eventos? Como disparar um evento em um form que não exista? É isso o que o script faz. Olhem só:
<script>
function rejeitaTecla(){	
	//By Micox - micoxjcg@yahoo.com.br - http://elmicox.blogspot.com
	//Grande colaboração de bermonruf: http://bermonruf.wordpress.com

	var oEvent=arguments[0];

	//filtrando o evento
	var oEvent = oEvent ? oEvent : window.event;
	var tecla = (oEvent.keyCode) ? oEvent.keyCode : oEvent.which;
	
	if(oEvent.type=="keydown" && navigator.appName.indexOf('Internet Explorer')<0 ){
		return false;
	}
	
	for(var i=1; cod_tecla=arguments[i]; i++){
		if (tecla == cod_tecla){
			if (typeof(oEvent.preventDefault)=='function'){
				oEvent.preventDefault();
			} else {
				oEvent.returnValue = false;
				oEvent.keyCode = 0;
			}
		}
	return false;}
}
function rejeitaTeclas(){
	var tecla = 0;
	var args_eval = "e, ";
	for(var i=0; tecla=arguments[i]; i++)
		{args_eval += tecla + ", ";}
	args_eval += "0";
	eval("document.onkeypress=function(e){rejeitaTecla("+args_eval+");}\n"+
		"document.onkeydown=function(e){rejeitaTecla("+args_eval+");}");
}

rejeitaTeclas(13); //Aqui você bloqueia quantas teclas você quizer!!! Ex.: rejeitaTeclas(13, 115, 64);
</script>

<form method="post">
Telefone:<input type="text" name="nome">
<input type="submit" value="Submeter">
</form>
Reparem que no form não há nenhum evento disparado que faz com que a tecla ENTER seja bloqueada. Porém ela é, de fato, suprimida. Esse script funciona perfeitamente nos browser's I.E. V.6; I.E. V.7; FireFox e Opera. Achei que valia a pena colocar o código aqui, uma vez que ele é bastante útil. Detalhe: Ele bloqueia quantas teclas você quizer!!! É só declarar seus respectivos códigos na chamada "rejeitaTeclas"

Bom. A dúvida é: Existe uma maneira de adaptação desse código que faz com que eu libere o "Enter" apenas quando o foco está em um botão?

Outra dúvida é: Existe alguma forma de descobrir qual objeto está em foco usando esta função? Pois preciso saber quando o foco está no botão para poder submeter ou cancelar.

Script by Micox: micoxjcg@yahoo.com.br - Blog Do Micox!!! Enjoy!!!

And bermonruf: bermonruf - Blog Do bermonruf!!!

Bom... Tópico grande né? []'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Apesar de estar como rsolvido, gostaria de expor o que passei para solucionar um problema igual.

Utilizei um script para deixar o Enter como TAB e um outro script que cria uma tecla de atalho para a tecla F2 e este faz o submit do form. Segues codigos abaixo:

Este cria o atalho para a tecla F2:

<script>

function Teclas() 
{

var tecla=window.event.keyCode; 
if (tecla==113) {submitform();}

}

</script>

Acima do tag que inicia o form, usei este:

<script LANGUAGE="JavaScript">
<!-- Begin
nextfield = "cli_nome"; // nome do primeiro campo do site
netscape = "";
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) {
		// ve quando e o netscape ou IE
		k = (netscape) ? DnEvents.which : window.event.keyCode;
		if (k == 13) { // pressiona tecla enter
		if (nextfield == 'done') {
			alert("este é o último campo do formulário!");
			return false;
			//return true; // envia quando termina os campos
		} else {
			// se existem mais campos vai para o proximo
			eval('document.NomedoForm.' + nextfield + '.focus()');
			return false;
		}
	}
}

document.onkeydown = keyDown; // work together to analyze keystrokes
if (netscape) document.captureEvents(Event.KEYDOWN|Event.KEYUP);
// End -->
			</script>

Abaixo do tag que fecha o form usei este:

<script language="JavaScript">
function submitform()
{
  document.NomedoForm.submit();
}
</SCRIPT>

No value do button, coloquei: "Enviar - F2"

Não sei se funciona em form dinamico.

Espero ter ajudado, um abraço a todos.

Sandro M. Ferreira

Fpolis...

Arquivado

[Resolvido] Javascript em formulário dinâmico.

Recommended Posts

AlterC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

AlterC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

bimonti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AlterC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

AlterC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

bimonti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

AlterC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sandro_MF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante