Assinar Kinghost
Testar G Suite

Pesquisar:

Custom Search

sexta-feira, 23 de dezembro de 2016

Contar Caracteres em uma Palavra ou Frase com JavaScript



Contar Caracteres com JavaScript

Trata-se de uma função bem básica e simples em JavaScript, mas de grande utilidade em inúmeras necessidades em qualquer projeto que seja.

Ela simplesmente conta quantos caracteres existem no campo <Input> do formulário e, no nosso caso, mostra o resultado em uma <Div>.

Porém, você poderá usar o resultado desse cálculo para diversas utilidades. Veja que os códigos JavaScripts geralmente são codificados em um arquivo com extensão .js ou, se na página, entre as TAGs <head> e </head>. Mas eu coloquei na página e fora dessas TAGs para mostrar que também funciona em qualquer lugar da página, embora não seja muito ético.

Clique Aqui para ver o funcionamento...

Veja o Código Fonte abaixo. Abra o seu Bloco de Notas, marque todo o código abaixo (do <html> ao </html>) e cole no documento aberto. Agora salve em alguma pasta com qualquer nome, ms com a extensão .html. Depois vá até a pasta onde salvou o arquivo.html e dê duplo-clique nele para ver funcionando.

<html>
<head>
<title>Contas Caracteres em uma Palavra ou Frase com JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0a2968" vlink="#000000" alink="#fa8f00" background="fundocortado.JPG">
<h1 align="center">Contas Caracteres em uma Palavra ou Frase com JavaScript</h1>
<div align="left"><br>
  <br>
<script langauge="javascript">
function contar() {
var l = document.theform.words.length;
document.getElementById("resultado").innerHTML = "Sua palavra ou frase tem "+document.theform.words.value.length+" caracteres";
}
</script>
</div>
<form name="theform">
  <div align="left">
    <input type="text" name = "words" value = "JavaPalace-vários JavaScripts para você!" size = 40>
    <br><br>
    <input type="button" value="Contar quantos caracteres tem" onClick="contar();" name="button">
  </div>
</form>
<br><br>
<div align="left" id="resultado" style="font-size:18px; font-weight:bold; color:#900;">Resultado:</div>
</body>
</html>


Nenhum comentário :

Postar um comentário

Comentário, Pedido, Sugestão...