Teste #1
Teste #2:
Exemplo de Código
Teste #1
Teste #2:
JavaScript
Alterar o valor de um campo do tipo “radio” a partir de um evento em JavaScript
Semana passada precisei fazer isso: alterar o valor de um campo radio a partir de um evento, que é feito de uma forma um pouco diferente que em outros campos, como uma caixa de texto comum, por exemplo.
Criei um modelo comentado para que você possa utilizar, caso precise. Para testar, copie em qualquer editor de texto simples (Notepad no Windows ou Gedit no Ubuntu) e salve como qualquercoisa.html Caso tenha dúvidas, poste nos comentários! 🙂
<html>
<head>
<script type="text/javascript">
function mudaRadio(posicao) {
/*
Pela função "mudaRadio" é passada uma variável, que é a posicao do campo radio.
Num grupo de radios, cada um tem um índice, que começa de 0, ou seja,
o primeiro radio possui índice zero, o segundo índice um e assim por diante.
Na linha abaixo, o valor do radio é alterado de acordo com a posição passada.
*/
document.forms[0]['cores'][posicao].checked = 1;
}
</script>
</head>
<body>
<form name="formulario">
<input type="radio" name="cores" value="azul" />Azul
<input type="radio" name="cores" value="verde" />Verde
<input type="radio" name="cores" value="vermelho" />Vermelho
<input type="radio" name="cores" value="amarelo" />Amarelo
<br /><br /><br />
<!-- O evento utilizado foi o onClick, mas poderia ter sido outro, a depender da sua necessidade -->
<input type="button" name="btnAzul" value="Azul" onClick="mudaRadio(0)" />
<input type="button" name="btnVerde" value="Verde" onClick="mudaRadio(1)" />
<input type="button" name="btnVermelho" value="Vermelho" onClick="mudaRadio(2)" />
<input type="button" name="btnAmarelo" value="Amarelo" onClick="mudaRadio(3)" />
</form>
</body>
</html>
Uma obra-prima de JavaScript!
Fui corrigir um problema em uma validação num JavaScript do Projeto "X", e encontrei a seguinte obra-prima:
if( !( ( (digitos / 10000000000) >= 1 ) && ( (digitos / 10000000000) < 10 ) ) ){
alert('O código deve conter 11 dígitos');
}
Longe de mim dizer que isso é um armengue ( 😛 ), mas acho que mais simples fazer isso:
if (digitos.length != 11) {
alert('O código deve conter 11 dígitos');
}
Tenso... 😛
Redirecionar automaticamente com JavaScript
O método location, da classe window do Javascript pode fazer o redirecionamento automático para uma página que você desejar.
Exemplo de Uso:
<script language="javascript" type="text/javascript"> window.location.href = "http://www.google.com.br/"; </script>
Máscaras para formulário com JavaScript e JQuery
Máscaras para formulário com JavaScript e JQuery
O Masked Input Plugin é um plugin pra JQuery que simplifica bastante o processo de mascarar um campo de formulário. Se você não conhece o JQuery, saiba que se trata de uma biblioteca JavaScript, que na prática, serve para facilitar o desenvolvimento de scripts em JavaScript. Isso quer dizer que o JQuery vai facilitar muito o seu trabalho, ao trabalhar com JavaScript.
Passando pouquissimos parâmetros é possível fazer uma validação em poucos minutos.
Primeiro vai ser necessário baixar dois arquivos:
– jquery.js em http://www.jquery.com
– jquery.maskedinput.js em em http://digitalbush.com/projects/masked-input-plugin
Também existem as versões comprimidas que você pode usar.
Depois é necessário fazer o chamado aos arquivos .js entre as tags <HEAD> e </HEAD> do seu site:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.maskedinput.js" type="text/javascript"></script>
Em seguida você define as características das máscaras. Alguns exemplos:
– Máscara para Data: 99/99/9999
– Máscara para Telefone: (99)9999-9999
– Máscara para CPF: 999.999.999-99
– 9 representa qualquer número, de 0 a 9
– a representa qualquer letra
– * representa qualquer letra ou número
Para utilizar as máscaras exemplificadas acima, é necessário colocar o seguinte código entre as tags <HEAD> e </HEAD>.
<script type="text/javascript">
jQuery(function($){
$("#data").mask("99/99/9999");
$("#telefone").mask("(99)999-9999");
$("#cpf").mask("999.999.999-99");
});
</script>
Lembre-se que será utilizado o id do campo que você quer mascarar. No caso do campo de telefone, utilizamos o id telefone, mas pode ser qualquer outro.
Pronto. Agora é só você criar suas próprias máscaras, da forma que desejar 🙂
Você pode obter mais informações em http://digitalbush.com/projects/masked-input-plugin
Javascript para o usuário aumentar ou diminuir fonte do site
Script que adiciona um link para que o usuário aumente o tamanho da fonte do texto, e outro link para que o usuário diminua o tamanho da fonte do texto.
Fonte: http://www.yogodoshi.com/blog/utilitarios/script-para-o-usuario-poder-aumentar-e-diminuir-a-fonte-do-site
<!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>Untitled Document</title>
<script type="text/javascript">
// Início do código de Aumentar/ Diminuir a letra
// Para usar coloque o comando:
// "javascript:mudaTamanho('tag_ou_id_alvo', -1);" para diminuir
// e o comando "javascript:mudaTamanho('tag_ou_id_alvo', +1);" para aumentar
var tagAlvo = new Array('p'); //pega todas as tags p//
// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small...
var tamanhos = new Array( '9px','10px','11px','12px','13px','14px','15px' );
var tamanhoInicial = 2;
function mudaTamanho( idAlvo,acao ){
if (!document.getElementById) return
var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
tamanho += acao;
if ( tamanho < 0 ) tamanho = 0;
if ( tamanho > 6 ) tamanho = 6;
tamanhoInicial = tamanho;
if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];
selecionados.style.fontSize = tamanhos[ tamanho ];
for ( i = 0; i < tagAlvo.length; i++ ){
tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
}
}
// Fim do código de Aumentar/ Diminuir a letra
</script>
</head>
<body>
<a href="javascript:mudaTamanho('texto', -1);">Diminuir</a>
<a href="javascript:mudaTamanho('texto', 1);">Aumentar</a>
<div style="font-size: 11px;" id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur scelerisque purus ut pede. Ut pulvinar diam vitae tellus. Nunc ultricies. Nam rhoncus justo vel dui. Morbi suscipit enim. Praesent dui dui, tincidunt eget, feugiat vel, tincidunt vel, elit. Curabitur tempus consequat nunc. Aliquam erat volutpat. Vivamus a massa non libero posuere blandit. Nulla ut velit quis leo luctus tincidunt. Vestibulum eget leo in augue ornare fringilla. Suspendisse suscipit dui. </p>
<p>Nullam ultrices justo eget mi. Curabitur porta augue eget magna. Nam imperdiet, ipsum eu aliquet interdum, justo ipsum pulvinar quam, quis convallis mi sapien eu ante. Etiam ac sem. Ut bibendum. Nulla facilisi. Vestibulum odio. Sed accumsan. Donec a dui. Cras lorem augue, egestas vel, accumsan vel, elementum sit amet, nisl. Cras id dui. Sed nulla ipsum, pulvinar et, suscipit a, vehicula eu, arcu. Fusce auctor nibh eget risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vitae ante in odio dapibus lobortis. </p>
</div>
</body>
</html>
Últimos comentários