Arquivo para JavaScript
Março 13, 2008 às 12:08 am
· Arquivado em JavaScript ·Tagged bloquear tecla, JavaScript
Olá amiguinhos!!!
Mais uma dica JavaScript para bloquear o teclado e botão do mouse, esse código é bem simples, podendo se estender com várias customizações a gosto do cliente.
Primeiro as funções, essas verificam a tecla e exibem a mensagem ao usuário:
<SCRIPT LANGUAGE="JavaScript1.2">
function alerta(){
alert('Conteúdo do site bloqueado');
return false;
}
function rejeitaTecla(oEvent){
var oEvent = oEvent ? oEvent : window.event;
var tecla = (oEvent.keyCode) ? oEvent.keyCode : oEvent.which;
if(tecla == 17 || tecla == 44|| tecla == 106){
alerta();
}
}
</SCRIPT>
Agora definimos que de acordo com o evento na página, será executado tal função:
<SCRIPT LANGUAGE="JavaScript1.2">
document.onkeypress = rejeitaTecla;
document.onkeydown = rejeitaTecla;
document.oncontextmenu = alerta;
</script>
Agora é só copiar e colar!
A sim, se quiser saber qual o keyCode da tecla a ser bloqueada, coloque apenas um alert(tecla); , assim você pode colocar esse valor no if, depois é claro, retirar o alert.
Abraços.
Link Permanente
Novembro 23, 2007 às 5:33 pm
· Arquivado em ASP, JavaScript ·Tagged contador de tempo, contador javascript, tempo
Bom dia pessoal, hoje deixo um simples codigo em JavaScript para contar tempo na página para execuçao de algum comando.
Por exemplo, pode fazer um teste on-line com tempo determinado, se passar o tempo fecha o teste e direciona o usuario para uma outra página. Ou então liberar o link após certo tempo determinado por você.
Então vamos ver como fica, nesse exemplo utilizei uma simples mecânica para redirecionar o usuário a uma determinada página.
- Primeiro passo, vamos criar o script com o contador, no meu caso fiz a página em ASP, porém pode ser feita ate em HTML.
-
<script language="JavaScript" type="text/javascript">
var contador = 10;
function conta() {
document.getElementById('tempo').innerHTML=contador;
if(contador == 0) {
document.getElementById('link').style.display="block";
}
if (contador != 0){
contador = contador-1;
setTimeout("conta()", 1000);
}
}
</script>
- Agora criamos onde será exibido o contador:
-
Aguarde <span id="tempo">0</span> segundos.
- O contador será exibido dentro das tags SPAN com o ID tempo.
- Aqui mostramos o que será exibido quando o tempo acabar:
-
<div id="link" style="display:none">
<p><a href="http://www.linkoff.com.br">
Clique aqui para acessar o site.
</a></p>
</div>
- Pronto, agora temos apenas que chamar a função no fim da página:
-
<script>
conta();
</script>
- Pronto, tudo criado e funcionando. Não?
Confira a página de exemplo clicando aqui.
Link Permanente
Novembro 14, 2007 às 2:10 pm
· Arquivado em ASP, JavaScript ·Tagged contador em asp, JavaScript, limite textarea
Bom dia, nesse post vou mostrar como fazer um contador e limitar o usuário a digitar x números de caracteres em um campo de texto.
Utilizaremos JavaScript para a validação do campo.
- Primeiro criamos o campo de mensagem e o campo do contador:
-
<label>Mensagem:<br>
<textarea onKeyUp="javascript:contador();" name="mensagem" cols="30" rows="10"></textarea>
</label>
<p>Máximo 20 caracteres.</p>
<p>Contador: <label>
<input name="contador" type="text" value="0" size="6" >
</label> </p>
- Aqui foi criado um campo de texto onde cada tecla pressionada pelo usuário chama uma função chamada “contador”.
- O campo “contador” recebe o tamanho do campo “mensagem”.
- Aqui temos a função em JavaScript:
-
<script>
function contador(){
var vlr_msg = document.getElementById("mensagem");
var vlr_cont = document.getElementById("contador");
vlr_cont.value = vlr_msg.value.length;
var limite = 20; if (vlr_msg.value.length >= limite) {
vlr_msg.value = vlr_msg.value.substring(0, limite-1);
}
}
</script>
- Nãoé tão complicada, na linha 2 e 3, definimos as variaveis, na linha 4 defino que o valor (“value”) do contador recebe o tamanho (“value.length”) do campo mensagem.
- Na linha 5 definimos um limite para o campo mensagem.
- Na linha 6 verificamos se a quantidade de caracteres digitadas é maior ou igual ao limite pré-definido.
- Se a condição for verdadeira, a função não deixa que o texto seja maior que o limite (“substring(0, limite-1)”).
Veja o exemplo AQUI.
Até mais.
Link Permanente
Novembro 14, 2007 às 1:36 pm
· Arquivado em ASP, JavaScript ·Tagged block, display, getElementById, JavaScript, ocultar itens
Olá pessoal, prometi falar sobre sessões, porém vou deixar para próxima.
Hoje falerei um pouco sobre como esconder itens na página utilizando funções em JavaScript, parece um bixo de sete cabeças, ma é muito mais fácil do que imaginamos.
Bom, a primeira coisa que temos em mente é que: Cada usuário prefere um navegador… Então temos que fazer uma função simples e funcional para que não dê erro em nenhum navegador… Impossível? Não…
Um simples exemplo de mostra e oculta, você pode ver clicando AQUI.
Segue o código abaixo:
- Primeiro criamos o link chamando a função Java:
-
<a href="javascript:Oculta('primeiro');">
Clique aqui para ocultar ou exibir a caixa abaixo. </a>
- Depois criamos um DIV com um ID, aqui chamdo de “PRIMEIRO”:
-
<div style="display:block" id="primeiro"></div>
- Agora colocamos um textarea dentro da div:
-
<div style="display:block" id="primeiro">
<textarea name="textarea" cols="20" rows="5"></textarea>
</div>
- Pronto, agora é só colocar a função em JavaScript.
- A função se chama Oculta, passando o nome da div como parâmetro:
-
<script> function Oculta(cxa){
if (document.getElementById(cxa).style.display=='none'){
document.getElementById(cxa).style.display='block';
}else{
document.getElementById(cxa).style.display='none';
} }
</script>
- Pronto, agora resta salvar e testar a página.
Pense nas grandes possibilidades que você pode ter utilizando esse sitema.
Quando disse no topo da página que temos que fazer uma função para todos os navegadores, vocês perceberam onde está essa diferença? Não? Está a mostra quando definimos o display=”block”. No FireFox não podemos utilizar display=”inline”, como fazemos no IE. Essa era a diferença.
Até a próxima.
Link Permanente
Novembro 5, 2007 às 2:12 pm
· Arquivado em ASP, JavaScript ·Tagged ASP, email, JavaScript, validação, Validar
Olá, temos muitas maneiras para validar um campo com JavaScript, vamos tratar agora o campo de Email.
Vou utilizar da maneira mais simples conhecida por um programador, que é obrigar o usuário digitar ao menos os caracteres: “@” e “.”
- Crie uma página de teste e um formulário, este aqui é simples:
<form action="teste.asp" method="post" id="form" name="form">
<input type="text" name="nome" />
<input type="text" name="email" />
<input type="button" name="botao" value="Enviar" onClick="valida()">
</form>
- Crie a função”valida()”.
- Vamos utilizar “indexOf”, isso faz com que seja feita uma busca no campo procurando o valor definido:
<script>
function valida(){
if (document.form.email.value.indexOf("@")==-1||document.form.email.value.indexOf(".")==-1){
alert('Digite um Email válido.');
}else{ document.form.submit(); }
}
</script>
- Salve a página e rode para testar.
Quando for clicado em Enviar, será feita a verificação, caso tenha os caracteres específicos, então ele submete o formulário.
Abraços!
Link Permanente
Novembro 5, 2007 às 1:38 pm
· Arquivado em ASP, JavaScript ·Tagged ASP, JavaScript, validação
Bom, muitas pessoas tem problemas quando estão programando em ASP e precisam que o usuário completem todos os campos do formulário, isso pelo menos aconteceu comigo no começo, hoje vejo que com JavaScript podemos fazer muitas coisas que com somente o ASP seria difícil.
Segue dois exemplos para obrigarem os usuários a preencherem os campos necessários sem precisar atualizar a página e fazer a verificação na próxima tela:
Primeiro exemplo envia uma mensagem para mostrando os campos vazios:
- Crie uma página para testes, nesse caso “teste.asp”, depois crie um formulário, esse aqui é de exemplo.
<form action=”teste.asp” method=”post” id=”form” name=”form”>
<input type=”text” name=”nome” />
<input type=”text” name=”senha” />
<input type=”button” name=”botao” value=”Enviar” OnClick=”valida();”>
</form>
- Nesse caso não coloque um botão Submit, apenas Button, em OnClick, mande para a função “valida();”.
- Crie a função “valida()”, lembre-se que a função deve sempre estar acima da chamada.
- Segue a função:
<script>
function valida(){
var msg=’Os seguintes campos estão vazios: ‘;
if (document.form.nome.value==”){
msg=(msg+’\nNome’)
}
if (document.form.senha.value==”){
msg=(msg+’\nSenha’)
}
if (msg!=’Os seguintes campos estão vazios: ‘){
alert(msg);
}else{document.form.submit();}
}
</script>
- Salve a página e rode para testar.
Segundo exemplo, que não garanto o funcionamento além do Internet Explorer, porém acho melhor, pois não irrita o usuário com esses alertas, minha dica é utilizar os alertas o mínimo possível.
- Crie uma página para testes, nesse caso “teste.asp”, depois crie um formulário, esse aqui é de exemplo.
<form action=”teste.asp” method=”post” id=”form” name=”form”>
<input type=”text” name=”nome” onKeyUp=”valida();” />
<input type=”text” name=”senha” onKeyUp=”valida();” />
<input type=”submit” name=”botao” disabled=”disabled” value=”Enviar”>
</form>
- Nesse caso, pode deixar o botão como “Submit”, porém desabilitado.
- A diferença é que quem chama a função é quando a tecla é solta nos campos.
- A função desabilita o botão de nome “botao” dentro do formulário, apenas será habilitado quando os dois campos estiverem preenchidos.
- Segue a função:
<script>
function valida(){
if (document.form.nome.value==”||document.form.senha.value==”){
document.form.botao.disabled=true;
}else{document.form.botao.disabled=false;}
}
</script>
- Sempre que a tecla for solta irá chamar a função efetuando a verificação e se for verdadeira, libera o botão para continuar.
É isso ai, vocês podem adaptar para quantos campos quiserem da forma que acharem melhor, com a mensagem que preferirem.
Um abraço a todos!
Link Permanente
