Leandro Garcia

Desabilitar o Enter em um form com Javascript

Recentemente, estive trabalhando em um sistema com cadastros, quando me deparei com um problema, o Enter.

Não podia Permitir que o usuário desse o action do form ao pressionar o enter, geralemente para mudar de campo.

Pesquisei na Internet, achei algumas opções, mas acabei criando a minha do jeito que eu realmente precisava. Cheguei ao script abaixo.

function arrumaEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}

<input onkeypress="return arrumaEnter(this, event)" maxlength="60" name="emitente" type="text" />

Linha a linha

function arrumaEnter (field, event) { - Nome da funcção, que recebe o campo e o evento utilizado

var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; – Recebe o evento utilizado

if (keyCode == 13) { – Se a tecla é o Enter

var i; - Cria a variável

for (i = 0; i < field.form.elements.length; i++) – Roda todos os camposdo form

if (field == field.form.elements[i]) - Se o campo utilizado é o atual

break; Para

i = (i + 1) % field.form.elements.length; – Adiciona 1 ao campo atual

field.form.elements[i].focus(); – Dá um foco no próximo campo

return false; – Retorna Falso, ou seja, não permite o submit

else – Caso contrário

return true; – Permite o Submit

onkeypress=“return arrumaEnter(this, event)” – Chama a função

Veja

download

• 3 comentários
• Comentar
• Permalink
• Compartilhe

Otimizando o JS. Diminuir o uso do getElementById

Anteriormente, eu escrevi a respeito de otimização do css a fim de reduzir tempo de carregamento das páginas e tráfego.

Dando sequência, vamos otimizar o JS.

…

Quando estamos trabalhando em um grande projeto, é comum termos que utlizar diversas vezes a sintaxe getElementById. Porém, ao invés de para cada situação escrevermos toda a sintaxe, podemos criar uma pequena função para isso.

Como?

Não Otimizado

function mudacor(id){

document.getElementById(id).style.color = '#990000';

}

function mudacorTexto(id){

document.getElementById(id).style.color = '#990000';

}

function mudacorspan(id){

document.getElementById(id).style.color = '#990000';

}

Otimizado

function $(id){ return document.getElementById(id); }

function mudacor(id){

$(id).style.color = '#990000';

}

function mudacorTexto(id){

$(id).style.color = '#990000';

}

function mudacorspan(id){

$(id).style.color = '#990000';

}

Explicando

No exemplo acima, ao invés de eu escrever 3 vezes esta sintaxe, escrevi apenas uma. Em um projeto grande, é muito provável que você precise utilizar bem mais vezes essa sintaxe. Com esta simples função, podemos economizar muitos kbytes em trafego, pois reduzimos o tamanho do JS. Porém, não é apenas essa a vantagem, deixando o código mais enxuto, fica mais fácil de, posteriormente, o analisarmos para efetuarmos uma alteração ou correção.

Clique aqui e veja

Download

• 3 comentários
• Comentar
• Permalink
• Compartilhe

Maxlength no Textarea, é possível?

Não e sim. Vou explicar.

Não, pois não existe qualquer atributo HTML para a tag que delimite no número máximo de caracteres que um textarea pode ter.

Sim, pois com javascript tem como isso ser feito. Abaixo a função.

function limita(campo){
var tamanho = document.form1[campo].value.length;
var tex=document.form1[campo].value;
if (tamanho>=124) {
document.form1[campo].value=tex.substring(0,124);
}
return true;
}

Essa função conta quantos caracteres tem no textarea e não permite que enhum outro seja inserido.

Linha a linha

function limita(campo){ – Declara a função e receb uma variável com o nome do campo(textarea) em que você quer que a função atue.

var tamanho = document.form1[campo].value.length; – Declara uma variável (tamanho) e insere nela a quantidade de caracteres do textarea.

form1 – O nome do formulário, neste caso está declarado name=”form1″

[campo] – O nome do campo, textarea

value – O conteúdo

length – Quantidade de caracteres

Ou seja, o campo do formulário form1 contém x caracteres.

var tex=document.form1[campo].value – Declara a variável text e recebe o conteúdo do textarea.

if (tamanho>=124) { – Pergunta se a variável tamanho(quantidade de caracteres) é maior que 124

document.form1[campo].value=tex.substring(0,124); – Insere dentro do campo o conteúdo  recebido na variável tex com a quantidade máxima de caracteres

substring – Extrai o conteúdo  de uma variável, no caso tex, entre os delimitadores, ou seja, do caractere 0 até o 124

Link funcionando

download

• 9 comentários
• Comentar
• Permalink
• Compartilhe