Javascript Essentials Part 5


Character Counter

This script will count words as you will type in the input box and will tell you that how many characters have left to type. It will restrict you from typing more then allowed characters.

<html>
<HEAD>
<script type="text/javascript">
<!--
function getObject(obj) {
  var theObj;
  if(document.all) {
    if(typeof obj=="string") {
      return document.all(obj);
    } else {
      return obj.style;
    }
  }
  if(document.getElementById) {
    if(typeof obj=="string") {
      return document.getElementById(obj);
    } else {
      return obj.style;
    }
  }
  return null;
}
 
//Contador de caracteres.
function Contar(entrada,salida,texto,caracteres) {
  var entradaObj=getObject(entrada);
  var salidaObj=getObject(salida);
  var longitud=caracteres - entradaObj.value.length;
  if(longitud <= 0) {
    longitud=0;
    texto='<span class="disable"> '+texto+' </span>';
    entradaObj.value=entradaObj.value.substr(0,caracteres);
  }
  salidaObj.innerHTML = texto.replace("{CHAR}",longitud);
}
 
//-->
</script>
<style type="text/css">
<!--
BODY {
  font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: Black;
  margin-left: 0px;
  margin-right: 0px;
  background-color: White;
}
.minitext {
  font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  font-size: 8pt;
  font-weight: normal;
  color: Black;
}
 
.0 {
  background-color: #4786D2;
}
.1 {
  background-color: #D3E8FD;
}
.2 {
  background-color: #D3E8FD;
}
.3 {
  background-color: #D3E8FD;
}
.4 {
  background-color: #D3E8FD;
}
 
TABLE {
  font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: Black;
}
 
INPUT.text {
  background-color: #FFFFFF;
  color: Black;
  border: 2px ridge Black;
  font-size: 10px;
  font-family: Verdana, Arial;
  font-weight: normal;
}
 
.enable {
  background-color: #77FF77;
  font-weight: bold;
  color: Black;
}
.disable {
  background-color: #FF7777;
  font-weight: bold;
  color: Black;
}
-->
</style>
</HEAD>
<BODY>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<form action="#" method="post">
<table align="center" class="0" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <td align="right" class="1"><span class="options">Field Name</span></td>
    <td class="2"><INPUT TYPE="TEXT" class="text" id="eBann" name="bannerURL" maxlength="100" size="60" onKeyUp="Contar('eBann','sBann','{CHAR} characters left.',100);"><br><span id="sBann" class="minitext">100 characters left.</span></td>
  </tr>
</table>
</form>
</body>
</html>

Related Posts


Leave a Reply

Your email address will not be published. Required fields are marked *