Que Foreros
Aquí les traigo una solución a mi problema, no creo que sea la mejor pero al menos hace lo que necesito,
limitar el texto de un textarea, y que el usuario no pueda escribir mas de lo que se pueda visualizar
Ahora utilizo el evento onkeyup el cual llama al metodo limitaLinea
El método recibe 2 parámetros el id de la caja de texto y el event
por medio del id obtenemos los siguientes valores del textarea
* vlr = El contenido de la caja de texto
* rows = El numero de lineas
* z = El tamaño de la fuente
* w = El ancho de la caja de texto(width)
haciendo un par de operaciones con z y w obtenemos el numero de caracteres
por linea que debe tener la caja de texto
posteriormente realizamos el mismo proceso que se realizaba anteriormente,
solo que esta vez se agrego la parte de limitar los caracteres si estos
superan el total de caracteres visibles en el textarea.
pero una imagen dice mas que mil palabras, asi es que aqui les dejo
el código para que lo analicen y si pueden mejorarlo pues que mejor
Código HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function limitaLinea(id, e) {
key = e.which ? e.which : e.keyCode;
obj = document.getElementById(id);
vlr = obj.value;
vlr = vlr.replace(/\n/gi, "");
vlr = vlr.replace(/\r/gi, "");
cnt = 1; cnt2 = 0;
rows = obj.rows;
sigue = true;
w = parseInt(obj.style.width);
lnmx = parseInt(w / 8.5);
total = lnmx * rows;
total=total+(rows-1);
if (vlr.length > total) {
vlr = vlr.substring(0, (lnmx * rows));
arr = vlr.split('');
cnt2 = 0;
vlr = "";
for (i = 0; i < arr.length; i++) {
cnt2++;
vlr += arr[i];
if (cnt2 >= lnmx && cnt < rows) {
vlr += "\n";
cnt++;
cnt2 = 0;
}
}
obj.value = vlr;
sigue = false;
} else {
arr = vlr.split('');
vlr = "";
for (i = 0; i < arr.length; i++) {
cnt2++;
vlr += arr[i];
if (cnt2 >= lnmx && cnt < rows) {
vlr += "\n";
cnt++;
cnt2 = 0;
}
}
obj.value = vlr;
if (cnt >= rows && cnt2 >= lnmx)
sigue = false;
else
sigue = true;
}
if ((key == 13 || key == 10) && cnt >= rows)
obj.value = vlr.substring(0,total);
if (!sigue)
obj.value = vlr.substring(0, total);
}
</script>
</head>
<body>
<textarea id="area" onkeyup="limitaLinea(id,event)" rows="3" cols="1" style="width:250px; font-zise:12px"></textarea>
</body>
</html> todavía le faltan unos detalles pero ya hace lo principal
espero les sirva o lo puedan mejorar