JavaScript

Exemplo: Vários botões para copiar textarea em uma única página (HTML e JavaScript)

Teste #1

Teste #2:

Exemplo de Código






  



  
    

Teste #1

Teste #2:

Fonte


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>

  • Publicidade

  • Redes Sociais

    Facebook  Twitter
  • Estatísticas

    Page Views (desde março de 2010):

    Estatísticas detalhadas
  • Novidades por e-mail!

    Digite seu e-mail:


    Fique tranquilo. Seu e-mail não será usado para outros fins, e você poderá se descadastrar quando quizer.

    Eu!

    Tiago Passos
    Todo o conteúdo desse site esta licenciado sob a licença Creative Commons 3.0 (CC BY 3.0). Você pode copiar e modificar o conteúdo desde que cite o autor.
    iDream theme by Templates Next | Powered by WordPress