HTML Question
- Thread starter silapa
- Start date
- Status
office politics
It's all just 1s and 0s
- Messages
- 6,555
- Location
- in the lab
http://javascript.internet.com/forms/character-counter.html
Use this script to limit the number of characters allowed in an input box. It will count the number of characters left in the box and display it below. Easy to modify.
<!-- TWO STEPS TO INSTALL CHARACTER COUNTER:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<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);">
<span id="sBann" class="minitext">100 characters left.</span></td>
</tr>
</table>
</form>
<center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided
by The JavaScript Source</font>
</center>
Use this script to limit the number of characters allowed in an input box. It will count the number of characters left in the box and display it below. Easy to modify.
<!-- TWO STEPS TO INSTALL CHARACTER COUNTER:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<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);">
<span id="sBann" class="minitext">100 characters left.</span></td>
</tr>
</table>
</form>
<center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided
by The JavaScript Source</font>
</center>
- Status
