[SOLUCIONADO] contar caracteres textarea con editor de texto

alinareyes61 · #1 (**permalink**) 28/01/2013, 16:26

Buenas!!
Hace unos dias que estoy intentando contar los caracteres en un textarea que tiene un editor de texto enriquecido.
Cuando el textarea es normal (sin el editor de texto) la mayoria de los ejemplos que he visto me funcionan, pero cuando pongo el editor, (he usado varios y siempre pasa lo mismo) deja de funcionar el contador.
En un foro lei que no era posible contar los caracteres con un editor de texto.
Eso es cierto??
Lo que quiero es poner un maximo de caracteres a entrar en un post o articulo.
No pongo codigo porque no se si es posible lo que quiero.
Gracias

ryugen · #2 (**permalink**) 28/01/2013, 19:44

Suponiendo

Código HTML:

Ver original<textarea id="editor"></textarea>

Probaría con la siguiente función :

Código Javascript:

Ver originalfunction contarCaracteresDelTexto () {
    var txt = document.getElementById('editor');
    var div = document.createElement('div');
    div.innerHTML = txt.value;
    if(div.textContent) {
        return div.textContent.length;
    } else {
       return div.innerText.length;
    }
}

Aquí hay un ejemplo para que la veas en funcionamiento: http://jsfiddle.net/wWMU9/6/

Básicamente esta función toma el contenido del textarea enriquecido (suponiendo que genere HTML válido).

Creo un nuevo elemento del DOM, al cual le inserto como su HTML interior el contenido del textarea.

Finalmente a este nuevo elemento le pido me devuelva la cantidad de caracteres de su "texto" interior, entonces en lugar de contar la cantidad de caracteres que ocupan las etiquetas del texto enriquecido, solo cuento el contenido.

Aclaración, el IF es simplemente para evitar que no funcione en algunas versiones de IE que no poseen la propiedad textContent

alinareyes61 · #3 (**permalink**) 29/01/2013, 15:21

Muchas gracias!!!! Voy a probarlo y ya te digo

alinareyes61 · #4 (**permalink**) 01/02/2013, 05:16

Hola ruygen.
Estoy intentando que funcione y no lo logro, debo de tener un error muy sencillo, pero no lo veo, apenas estoy comenzando con javascript.

aqui te pongo todo el codigo, es un formulario super normal, solo para ver que funciona para pasarlo a mi textarea.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pruebas de contar textarea</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.min.js"></script>

<style type="text/css">
#editor {
margin:5em;
width:200px;
height:115px;
z-index:1;
}
</style>
</head>

<body>
<script language="JavaScript" type="text/javascript">
function contarCaracteresDelTexto () {
var txt = document.getElementById('editor');
var div = document.createElement('div');
div.innerHTML = txt.value;
if(div.textContent) {
return div.textContent.length;
} else {
return div.innerText.length;
}
}

$("#editor").blur(function(){alert(Hola /*contarCaracteresDelTexto()*/)});
</script>
<form name="form" action="editiho.php" method="post" enctype="multipart/form-data">
<div id="editor">
<textarea id="editor"></textarea>
</div>
</form>

</body>
</html>

Puedes ayudarme.

Gracias!!!!!

alinareyes61 · #5 (**permalink**) 01/02/2013, 12:01

Solucionado me faltaba un ; aqui va el codigo completo.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Contar caracteres textarea</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.min.js"></script>
</head>

<body>
<form name="form2" action="editiho.php" method="post" enctype="multipart/form-data">
<textarea id="editor"></textarea>
</form>
<script language="JavaScript" type="text/javascript">
function contarCaracteresDelTexto () {
var txt = document.getElementById('editor');
var div = document.createElement('div');
div.innerHTML = txt.value;
if(div.textContent) {
return div.textContent.length;
} else {
return div.innerText.length;
}
}

$('#editor').blur(function()
{alert(contarCaracteresDelTexto());
})
</script>
</body>
</html>

Millones de gracias!!!