Neste tópico irei explicar como fazer para converter dinamicamente um texto de um campo INPUT TEXT de MINÚSCULA para MAIÚSCULA ou vice-verso.
Segue modelo de exemplo:
----------------------------------------------------------------------------------
<!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>
<script type="text/JavaScript">
function up(lstr){ // converte minusculas em maiusculas
var str=lstr.value; //obtem o valor
lstr.value=str.toUpperCase(); //converte as strings e retorna ao campo
}
function down(lstr){ // converte maiusculas em minusculas
var str=lstr.value; //obtem o valor
lstr.value=str.toLowerCase(); //converte as strings e retorna ao campo
}
</script>
</head>
<body>
<form name="form" method="POST" enctype="multipart/form-data">
<table width="100%" cellpadding="2" cellspacing="2" bgcolor="#F0F0F0">
<tr>
<th style="width: 50%">
Converter Minúscula para Maiúscula
</th>
<th style="width: 50%">
Converter Maiúscula para Minúscula
</th>
</tr>
<tr>
<td>
<input type="text" name="stringup" class="form" style="width: 90%" onkeyup="up(this)">
</td>
<td>
<input type="text" name="stringdown" class="form" style="width: 90%" onkeyup="down(this)">
</td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/JavaScript">
function up(lstr){ // converte minusculas em maiusculas
var str=lstr.value; //obtem o valor
lstr.value=str.toUpperCase(); //converte as strings e retorna ao campo
}
function down(lstr){ // converte maiusculas em minusculas
var str=lstr.value; //obtem o valor
lstr.value=str.toLowerCase(); //converte as strings e retorna ao campo
}
</script>
</head>
<body>
<form name="form" method="POST" enctype="multipart/form-data">
<table width="100%" cellpadding="2" cellspacing="2" bgcolor="#F0F0F0">
<tr>
<th style="width: 50%">
Converter Minúscula para Maiúscula
</th>
<th style="width: 50%">
Converter Maiúscula para Minúscula
</th>
</tr>
<tr>
<td>
<input type="text" name="stringup" class="form" style="width: 90%" onkeyup="up(this)">
</td>
<td>
<input type="text" name="stringdown" class="form" style="width: 90%" onkeyup="down(this)">
</td>
</tr>
</table>
</form>
</body>
</html>
----------------------------------------------------------------------------------
Copie, cole e salve como qualquerNome.html
Na programação acima temos campos do tipo text que quando digitado algo dentro (onKeyup) chama a função (function) up(esta converte de minúscula para maiúscula) e a down(esta converte de maiúscula para minúscula) que retorna a conversão para o mesmo campo.
Bom Pessoal, espero ter ajudado e que este exemplo facilite o dia-a-dia da programação de websites.
Qualquer duvidas ou sugestões poste comentário ou Acesse www.w3ti.com.br
Abraços a todos, até a proxima postagem.
Copie, cole e salve como qualquerNome.html
Na programação acima temos campos do tipo text que quando digitado algo dentro (onKeyup) chama a função (function) up(esta converte de minúscula para maiúscula) e a down(esta converte de maiúscula para minúscula) que retorna a conversão para o mesmo campo.
Bom Pessoal, espero ter ajudado e que este exemplo facilite o dia-a-dia da programação de websites.
Qualquer duvidas ou sugestões poste comentário ou Acesse www.w3ti.com.br
Abraços a todos, até a proxima postagem.
Muito obrigado. O único dentre uns 10 que testei que funciona. Ajudou e muito!
ResponderExcluirperfeito. tem como eu colocar essa funcao em um arquivo separado em js? eu tentei aqui mas nao funcionou. Quando a funcao esta na propria pagina funciona perfeitamente, mas quando eu coloco no arquivo separada ela nao responde de acordo.
ResponderExcluir