[SOLUCIONADO] calcular fin de linea en textarea

brnb8626 · #1 (**permalink**) 11/02/2013, 18:22

buen día.

hoy vengo con un nuevo problema, como puedo calcular el fin de linea en un textarea, verán cuando la palabra es demasiado larga, esta aparece en una nueva linea.

lo que pretendo es que le usuario no escriba mas de lo que se pueda visualizar en el textarea

para comprobarlo copien esto en los comentarios:
-palabra palabra palabra palabra palabra palabra palabra palabra palabra palabra palabra NuevaLinea-

y podrán ver que NuevaLinea se pasa al siguiente renglón.

he logrado evitar que el usuario escriba en una tercera linea cuando el textarea tiene el atributo rows="2", capturando el evento enter y comparandolo con el numero de rows, pero esto no me funciona cuando la cadena es muy grande y se pasa a la siguiente linea

, habra forma de calcular esto, o cual podría ser otra solución

espero me haya explicado

emprear · #2 (**permalink**) 12/02/2013, 05:33

No te entiendo, y menos aún esto

Cita:

para comprobarlo copien esto en los comentarios:
-palabra palabra palabra palabra palabra palabra palabra palabra palabra palabra palabra NuevaLinea-

¿será pegar?, ¿y en que comentarios? acaso hay una url de ejemplo que olvidaste pasar?
Saludos

brnb8626 · #3 (**permalink**) 12/02/2013, 10:04

al parecer no me entendieron

tengo el siguiente codigo

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){
	var obj=document.getElementById(id);
	var vlr=obj.value.split('');
	var cnt=1;
	var rows=obj.rows;
	var key = window.event.keyCode || window.event.which;
	for(i=0;i<vlr.length;i++)
		if(vlr[i]=="\n" || vlr[i]=="\r")
			cnt++;
	if(cnt>=rows && (key==10 || key==13))
		return false;
	else
		return true;
}
</script>
</head>
<body>
<textarea id="area" onkeypress="return limitaLinea(id)" rows="3" cols="1" style="width:250px"></textarea>
</body>
</html>

la funcion recibe el id del texarea, obtenemos su contenido y la propiedad rows
el contenido se guarda en un arreglo cuando el usuario presiona una tecla se recorre el arreglo y cuenta los \n o \r
si el contador(cnt) llega a ser = o mayor que rows retorna un false y evitamos que se siga escribiendo

para los que no saben:
\n = nueva linea
\r = retorno

pero esta funcion no funciona

cuando el usuario sigue escribiendo y nunca presiona la tecla enter
lo que busco es calcular el fin de la linea para agregar un \n y evitar que siga escribiendo despues de los rows establecidos en el texarea

espero aberme explicado mejor

__SDP__ · #4 (**permalink**) 12/02/2013, 10:27

el problema de los textarea es que calcular lo que se teclea en el interior no creo que sirva mucho.

que pasa si yo copio un texto grande y lo pego adentro del textarea se salta cualquier funcion que hayas hecho.

excepto que tu funcion se active cuando reciba un cambio en el interior

emprear · #5 (**permalink**) 12/02/2013, 10:52

Cita:

Iniciado por brnb8626

al parecer no me entendieron

tengo el siguiente codigo

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){
	var obj=document.getElementById(id);
	var vlr=obj.value.split('');
	var cnt=1;
	var rows=obj.rows;
	var key = window.event.keyCode || window.event.which;
	for(i=0;i<vlr.length;i++)
		if(vlr[i]=="\n" || vlr[i]=="\r")
			cnt++;
	if(cnt>=rows && (key==10 || key==13))
		return false;
	else
		return true;
}
</script>
</head>
<body>
<textarea id="area" onkeypress="return limitaLinea(id)" rows="3" cols="1" style="width:250px"></textarea>
</body>
</html>

la funcion recibe el id del texarea, obtenemos su contenido y la propiedad rows
el contenido se guarda en un arreglo cuando el usuario presiona una tecla se recorre el arreglo y cuenta los \n o \r
si el contador(cnt) llega a ser = o mayor que rows retorna un false y evitamos que se siga escribiendo

para los que no saben:
\n = nueva linea
\r = retorno

pero esta funcion no funciona

cuando el usuario sigue escribiendo y nunca presiona la tecla enter
lo que busco es calcular el fin de la linea para agregar un \n y evitar que siga escribiendo despues de los rows establecidos en el texarea

espero aberme explicado mejor

no se muy bien que intentás, pero empecemos por lo sencillo

onkeypress="return limitaLinea(id)"
no deberias pasar el valor del id?
onkeypress="return limitaLinea('area', event)"
y que la función reciba (id,evtn)

Con lo siguiente lo que hace es que despues de escribir 3 lineas te congele el ingeso de más caracteres

Código HTML:

Ver original<!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,evnt){
    var obj=document.getElementById(id);
    var vlr=obj.value.split('');
    var cnt=1;
    var rows=obj.rows;
    var ev = (evnt) ? evnt : event;
   var key=(ev.which) ? ev.which : event.keyCode;
    
    for(i=0;i<vlr.length;i++)
        if(vlr[i]=="\n" || vlr[i]=="\r")
            cnt++;
    if(cnt>=rows && (key==10 || key==13))
        return false;
    else
        return true;
}
</script>
</head>
<body>
<textarea id="area" onkeypress="return limitaLinea('area',event)" rows="3" cols="1" style="width:250px"></textarea>
</body>
</html>

SAludos

brnb8626 · #6 (**permalink**) 17/02/2013, 00:35

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