En esta nueva entrada veremos como realizar un contador de carácteres para un campo de texto, limitando el número de caráteres que podemos escribir y visualizando el número de los que nos quedan por escribir.
Nos saltamos las metas básicas de xhtml.
<head>
<!-- Este es el código del contador -->
<script type="text/JavaScript">
<!--
// Esta función limita el número de carácteres del text area de comentarios.
function limita(elEvento, maximoCaracteres) {
var elemento = document.getElementById("mensaje");
// Obtener la tecla pulsada
var evento = elEvento || window.event;
var codigoCaracter = evento.charCode || evento.keyCode;
// Permitir utilizar las teclas con flecha horizontal
if(codigoCaracter == 37 || codigoCaracter == 39) {
return true;
}
// Permitir borrar con la tecla Backspace y con la tecla Supr.
if(codigoCaracter == 8 || codigoCaracter == 46) {
return true;
}
else if(elemento.value.length >= maximoCaracteres ) {
return false;
}
else {
return true;
}
}
function actualizaInfo(maximoCaracteres) {
var elemento = document.getElementById("mensaje");
var info = document.getElementById("info");
if(elemento.value.length >= maximoCaracteres ) {
info.innerHTML = "Máximo "+maximoCaracteres+"caracteres";
}
else {
info.innerHTML = "You can write up to "+(maximoCaracteres-elemento.value.length)+" additional characters";
}
}
//-->
</script>
/*
Tendremos que dar el id que tenga el text area y añadir onkeypress="return limita(event, 200);" onkeyup="actualizaInfo(200)" para limitar los caracteres a 200 en este caso
*/
</head>
<body style="text-align:center; margin-top:10px; margin-bottom:0px">
<div id="head">
<font size='6'>
JUAN MANUEL BARRÓS PAZOS
</font>
<br />
<font size='2'>
PALMA DE MALLORCA ~ PROGRAMACIÓN & DISEÑO.
</font>
</div>
<div style="clear:both"></div>
<div style="margin-left:auto; margin-right:auto; margin-top:40px; text-align:left; width:500px">
<table style="color:#666666" width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span style="color:#FF0000;">CAMPO DE TEXTO</span></td>
<td>
<!-- Ojo -->
<textarea onkeypress="return limita(event, 200);" onkeyup="actualizaInfo(200)" name="mensaje" id="mensaje" cols="40" rows="5"></textarea>
<div id="info" align="center" style="color:#0080C0;">
Maximum 200 characters
</div>
</td>
</tr>
</table>
</div>
<div style="clear:both"></div>
<!-- Inicio footer -->
<div id="footer" style="margin-top:36px">
© Juan Barrós Pazos.</div>
<!-- Fin footer -->
</body>
</html>
No hay comentarios:
Publicar un comentario
Gracias por vuestros aportes.