Detectar TextArea vacío

cslbcn · #1 (**permalink**) 16/12/2009, 16:43

Hola. Tengo un TextArea como este:
<textarea cols="85" rows="2" Id="TAestado" onBlur="b(this)"></textarea>

Entre otras funciones, este objeto aumenta su numero de rows cada vez que se le da a la tecla Enter y decrece su numero de rows cuando presiono la tecla BackSpace.

Lo que quiero conseguir es que cuando cuando saque el foco del objeto (evento onBlur), si en el TextArea solo he introducido "intros" y hayan aumentado su numero de rows, cuando salga de él el número de rows sea igual a 2, el tamaño inicial. Si he introducido aunque sea una sola letra, no quiero que el tamaño varie.

He creado este pequeño script pero no funciona... no sé que puede ocurrir. Alguien me puede ayudar?

Muchas gracias

Código PHP:

  function b(campo){ 
         
     
         
         
        var MAX = campo.value.length; 
        var STR = campo.value; 
        var VAL;         
         
        var i; 
        var char; 
        for (i=1; i=MAX; i = i+ 1) 
        { 
            char = Mid(STR, i, 1); 
             
            if (char != '') 
            { 
                VAL = 1; 
                break; 
            } 
            else 
            { 
                VAL = 0;     
            } 
     
 
        } 
        if (VAL = 1) 
        { 
            document.formulario.TAestado.rows = 2; 
        } 
         
         
     
        //var relleno = campo.value; 
        //alert("%" + relleno + "%"); 
    //    if (campo.value == ' ') 
        //{ 
    //        document.formulario.TAestado.rows = 2; 
            //alert('vacidor'); 
    //    } 
    //    alert(campo.value); 
         
    }

zerokilled · #2 (**permalink**) 16/12/2009, 17:00

no he mirado tu codigo por lo que me voy a basar solo por lo que explicas. se me ocurre una expresion regular para detectar los saltos de lineas o cualquier caracter no imprimible (whitespace chars).

Código:

if(/^\s{2,}$/.test(value del textarea))element_textarea.rows = numero filas;

en este caso, la expresion busca si existe alguna coincidencia de dos o mas whitespaces.

quimfv · #3 (**permalink**) 17/12/2009, 06:40

Tenias bastantes errores en tu codigo....

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function alsalir(campo){
        var MAX = campo.value.length;
        var STR = campo.value;
        var VAL=0;        
        var i;
        var char;
        if (MAX!=0){
        for (i=0; i<MAX; i++){
            char = Mid(STR, i, 1);
            if (/^\s/.test(char)){
                VAL = 0;    
            }else{
                VAL = 1;
                break;
            }
        }
    }
        if (VAL == 0){
             alert("No has escrito nada");
            campo.value="";
            campo.rows = 2;
        }else{
             alert("Has escrito algo");
        }
    }
function Mid(str, start, len)
{
// Make sure start and len are within proper bounds
    if (start < 0 || len < 0) return "";
    var iEnd, iLen = String(str).length;
    if (start + len > iLen)
          iEnd = iLen;
    else
          iEnd = start + len;
    return String(str).substring(start,iEnd);
} 
</script>
</head>
<body>
<textarea name="areatexto" cols="25" rows="2" id="areatexto" onBlur="alsalir(this)"></textarea>
</body>
</html>

Errores:

Mid no es una funcion definida en javascript (igual la tenias en otra parte de tus scripts, te paso una por si no la tenias)

El operador de comparación de igualdad es == no =

Es mucho suponer que char != '' (cadena vacia) sea lo unico que te interesa eleminar... por mucho que aparentemente sea una cadena vacia ''.

Vamos a poner nombres inteligibles a las cosas, que es eso de "function b(campo)"... el nombre debe dar pistas de lo que hace la funcion.

Quim

zerokilled me puedes decir porque funciona igual si uso /^\s/.test(char) o /\s/.test(char)

zerokilled · #4 (**permalink**) 17/12/2009, 12:32

el acento circunflejo, o en ingles caret (^), es un ancla que significa "al principio de la cadena". los anclas en las expresiones regulares le indican donde debe comenzar el pareo. sin el caret, la expresion parea desde cualquier posicion que exista un caracter de la clase \s, o sea puede ser un linefeed, espacios, tabular, entre otros. por tanto,

Código:

// devuelve true, notese que la cadena comienza con un espacio;
/^\s/.test(" una cadena");

// devuelve false, no comienza con un whitespace char;
/^\s/.test("una cadena"); 

// devuelve true, existe un whitespace char en la cadena;
/\s/.test("una cadena");

una referencia que le puede ser util, http://www.regular-expressions.info/anchors.html

cslbcn · #5 (**permalink**) 17/12/2009, 13:38

Gracias. Ahora si que funciona, pero si lo añado a mi proyecto entra en conflicto con otros javascript.

Como dije antes, el textarea aumenta su numero de rows cada vez que se le da a la tecla Enter y decrece su numero de rows cuando presiono la tecla BackSpace. Para ello uso el plugin jQuery
http://www.unwrongest.com/projects/elastic/

No hace lo del código que me habéis puesto y no consigo hacer que funcione... me estoy desesperando bastante. Alguien me ayuda?

quimfv · #6 (**permalink**) 18/12/2009, 01:43

Gracias zerokilled con tu explicacion esta claro que en este caso es absolutamente equivalente puesto que estamos comparando con un solo caracter....

Cita:

Gracias. Ahora si que funciona, pero si lo añado a mi proyecto entra en conflicto con otros javascript.

???

Que conflicto tienes... dinos el error...

Esto funciona... creo

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
var enterant=false;
function estiraiarronsa(e,obj){
    (e.keyCode) ? k=e.keyCode : k=e.which;
    alert(k);
    if(k==8 && enterant==true){
        obj.rows--;
    }
    if(k==13){
        obj.rows++;
        enterant=true;
    }else{
        enterant=false;
    }
}
 
function alsalir(campo){
        var MAX = campo.value.length;
        var STR = campo.value;
        var VAL=0;        
        var i;
        var char;
        if (MAX!=0){
        for (i=0; i<MAX; i++){
            char = Mid(STR, i, 1);
            if (/^\s/.test(char)){
                VAL = 0;    
            }else{
                VAL = 1;
                break;
            }
        }
    }
        if (VAL == 0){
             alert("No has escrito nada");
            campo.value="";
            campo.rows = 2;
        }else{
             alert("Has escrito algo");
        }
    }
function Mid(str, start, len)
{
// Make sure start and len are within proper bounds
    if (start < 0 || len < 0) return "";
    var iEnd, iLen = String(str).length;
    if (start + len > iLen)
          iEnd = iLen;
    else
          iEnd = start + len;
    return String(str).substring(start,iEnd);
} 
</script>
</head>
<body>
<textarea name="areatexto" cols="25" rows="2" id="areatexto" onBlur="alsalir(this)" onKeyUp="estiraiarronsa(event,this);"></textarea>
</body>
</html>

Quim

cslbcn · #7 (**permalink**) 19/12/2009, 09:04

ya lo arreglé. Eliminé el plugin elastic de jQuery y usé un código más imple y corto:

Código HTML:

Ver original// JavaScript Document
    //agrandar TextArea
    function agrandar(){
        
        area=document.forms['formulario'].TAestado.value;
        lineas=area.split("\n");
        for(i in lineas){
            var ubound=i;
        }
        //alert(ubound);
            ubound=new Number(ubound)+1;
            if (ubound>10){
                document.forms['formulario'].TAestado.rows=10;
                document.getElementById('TAestado').className="TAestadoMax";
            }else{
                document.forms['formulario'].TAestado.rows=ubound;
                document.getElementById('TAestado').className="TAestadoNor";
            }
            
    }

Con la función Agrandar, cuando se hace un salto de linea el numero de rows del textarea aumenta, y si se quitar un salto de linea, el numero de rows disminuye. También, cuando el maximo de rows es 10, el numero de rows no se altera y aparece el scroll. TAestadoMAX y TAestadoNor son 2 clases en CSS:

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
.TAestadoMax{
    resize: none; 
    border: none;   
}
.TAestadoNor{
    resize: none; 
    overflow: hidden; 
    border: none;   
}

Gracias por vuestra ayuda. Recientemente me inicié en JS y voy viendo como se pueden hacer muchas cosas en este lenguaje