contador de palabras sencillo

[rodrypaladin]

Buenas compis, hace mil que no toco javascript y juntado con que tenía un nivel bajo bajo pues ya se me ha olvidado todo.

Estoy intentando realizar un contador de palabras sencillo que cuente las palabras de un textarea, no quiero que tenga excepciones ni nada por el estilo ya que de momento no las necesito. Por el momento he realizado esto pero obviamente no funciona.

Esta es la función

Código Javascript:

<script type="text/javascript">
  function palabras() {
    textArea = document.getElementById("descripcion").value;
    caracteres = textoArea.length;
    textAreaDividido = texArea.split(" ");
    palabras = textAreaDividido.length;
 
    document.getElementById('cont').innerHTML = palabras;
  }
</script>
 

aquí el código html donde está el textarea

Código HTML:

<textarea type="text" class="form-control" name="descripcion" id="descripcion" onkeyup="palabras();" placeholder="Descripción del artículo"></textarea>
 

y aquí la etiqueta p donde quiero que haga el innerHTML

Código HTML:

<div class="col-md-2">
        <p id="cont"> </p>
    </div>
 

Alguien sabría decirme donde fallo ? Un saludo a todos!!

[ZedGe1505]

Podrías usar JQUERY

Código HTML:

<textarea type="text" class="form-control" name="descripcion" id="descripcion" placeholder="Descripción del artículo"></textarea>
<div class="col-md-2"><p id="cont"> </p></div>
 

Código Javascript:

$(document).ready(function(){
$('#descripcion').keyup(function(){
     var palabras = $(this).val().length;
     $('#cont').text('Has escrito en total '+ palabras +' palabras');
     });
});
 

En tu código tienes mala la variable... derepente se llama textArea y en otras textoArea

[rodrypaladin]

Aun solucionando el error de mi código sigue sin funcionar. No entiendo nada de jquery por eso prefiero no usarlo.

Alguna idea de por qué siguen sin ir ?

[ZedGe1505]

2 cosas

1.- Mi código esta mal era un contador de letras, con esto cuenta palabras xd

Código Javascript:

var palabras = $(this).val().split(/\b[\s,\.\-:;]*/).length;
 

2.- Después de cambiar la variable que esta mal, cámbiale el nombre a tu función, quizás se marea al crear un contador llamado palabras igual que una función llamada palarbas

[rodrypaladin]

sigue sin ir y no se por qué la verdad...

Código Javascript:

function pal() {
 
    var textArea = document.getElementById("descripcion").value;
    var caracteres = textArea.length;
    var textAreaDividido = textArea.split(" ");
    var palabras = textAreaDividido.length;
 
    document.getElementById('cont').innerHTML = "hay " + palabras + " palabras";
  }
 

Código HTML:

<textarea type="text" class="form-control" name="descripcion" id="descripcion" onKeyUp="pal();" placeholder="Descripción del artículo"></textarea>
 

Código HTML:

<div class="col-md-3">
        <p id="cont">0</p>
    </div>
 

[ZedGe1505]

Ahora que lo editaste te funciona no?

Tenias un texArea en vez de textArea

[rodrypaladin]

si pero aun así no funciona, pero no porque el codigo no funcione

si no por medio de un editor externo reemplaza el textarea por otro para mostrar un editor de texto..

si quito el editor si los cuenta pero con el editor no los cuenta.

Código HTML:

<textarea type="text" class="form-control" name="descripcion" id="descripcion" onkeyup="mostrar();" placeholder="Descripción del artículo"></textarea>
                <!--> editor CKeditor</!-->
                <script>
                // Replace the <textarea id="id"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'descripcion' );
            </script>
 

dentro de los archivos del editor es imposible mirar nada pues está todo el código junto linea tras linea y no puedo leer ni entender nada XD

[ZedGe1505]

Busca el ID del nuevo textarea con el inspeccionador de elementos de chrome y cámbialo en el código de js y ya

[rodrypaladin]

No hay manera, me aparecen varios id de los divs dentro de la caja del editor, pero he probado con todos y nada, porque el textarea que me sigue apareciendo es el que yo hago, pero no me aparece otro que reemplace al otro en el código al inspeccionar elemento.

[larrysun2]

Código Javascript:

palabras = textArea.match(/[^\s]+/g).length
 

[IsaBelM]

Realmente necesitas un editor como ese?? Quizás con esté te puede ser más que suficiente http://www.disegnocentell.com.ar/notas2.php?id=180

[rodrypaladin]

Lo que me pide el cliente @IsabelM, son muy caprichosos XD

Quizás seleccionando el textarea pero no por id, si no por el name, tal vez el editor no reemplace también el name y pueda funcionar. ¿ Cómo sería de esa forma ?

[IsaBelM]

Por el name http://librosweb.es/libro/javascript...elementos.html
Por el class https://developer.mozilla.org/es/doc.../querySelector

Puedes mostrar la línea de código con la que recibes el valor del campo cuando se envía ??

[rodrypaladin]

Te refieres a esta ?

Código HTML:

<textarea type="text" class="form-control" name="descripcion" id="descripcion" onKeyUp="pal();" placeholder="Descripción del artículo"></textarea>
 

Pongo la funcion también

Código Javascript:

function mostrar() {
            var texto = document.getElementById("descripcion").value;
            var caracteres = texto.length;
            var textoDividido = texto.split(" ");
            var palabras = textoDividido.length;
            document.getElementById("cont").innerHTML = palabras;
  }
 

Donde se muestra

Código HTML:

<div class="col-md-3">
        <p id="cont">0</p>
    </div>
 

Funcionar funciona, el problema es cuando el editor sustituye al textarea que tengo yo, se ve que la id es distinta tal vez y por eso no pilla nada, es decir, si quito el editor funciona, pero dejándolo puesto no

[IsaBelM]

No, me refería a el código del.lado del servidor

$_post["nombre"]

La parte importante es la variable "nombre". De éste modo tienes la referencia de como accesar al.elemento

[rodrypaladin]

Si bueno por php supongo que si se podría pero tendría que enviar primero el formulario, por lo que no se actualizaría conforme vas escribiendo en el textarea.

[IsaBelM]

no, a ver si me explico. cuando envías el formularios, recibes unos parámetros. estos parámetros a su vez contienen valores y estos valores son guardados en una bd. pues lo que te interesa saber es el nombre del parámetro. si envías el formulario a un archivo .php, la manera de recogerlo es con

$_POST['nombre']
$_GET['nombre']
etc...

por ende, si enviaras el formulario y quisieras recoger el valor del textarea, sería

$_POST['descripcion']
$_GET['descripcion']
etc....

pero al no enviar el textarea ...... es lo que has de resolver

EDITO
he tenido algo de tiempo para leer un poco la documentación del editor y esto es lo que he encontrado. lee la segunda sección

[rodrypaladin]

Tal vez me haya explicado mal, pero el formulario no se envia en ningun momento, entonces $_POST o $_GET no llegan a existir.

Lo que intentaba es que conforme vaya escribiendo en el textarea en una etiqueta <p> vaya apareciendo el total de palabras, pero sin enviar el formulario antes, por eso había pensado en javascript.

Si mando el formulario si que es verdad que podría trabajar con $_POST["descripcion"], pero tendría que mandar el formulario ( darle a submit ) cada vez que quiera contar las palabras del textarea

No entiendo muy bien la documentación ni aun traduciendola XD:

Tenga en cuenta que el reemplazado <textarea> se actualiza automáticamente por CKEditor recta antes de la presentación. Si usted necesita para acceder a la <textarea> valor mediante programación con JavaScript (por ejemplo, en el controlador de onsubmit para validar los datos introducidos), existe la posibilidad de que el <textarea> elemento todavía almacenar los datos originales. Con el fin de actualizar el valor de reemplazado <textarea> utilizar el método editor.updateElement ().

En casos raros puede ocurrir que la configuración del servidor o aplicación rechazará presentada contenido HTML si no se codifica primero (por ejemplo, ASP.NET ValidateRequest). En tal caso, seleccione la opción config.htmlEncodeOutput.

Creo que eso habla de recoger los datos antes de sustituirlo, y sería al contrario, necesito los datos de dentro del textarea pero una vez ya estoy trabajando con el CKeditor y ya se ha sustituido

[IsaBelM]

era la siguiente línea

If you need to get the actual data from CKEditor at any moment using JavaScript, use the editor.getData() method as described above.

si necesitas obtener los datos reales de CKEditor en cualquier momento usando javascript, utiliza el método editor.getData() como se ha descrito anteriormente

[rodrypaladin]

Código Javascript:

getData( internal ) : String
 
Gets the editor data. The data will be in "raw" format. It is the same data that is posted by the editor.
 
if ( CKEDITOR.instances.editor1.getData() == '' )
    alert( 'There is no data available.' );
 

Ese ejemplo me da. Yo quiero meter el contenido en una variable pero no consigo hacerlo funcionar, algo hago mal con la funcion xd

[IsaBelM]

Te refieres a esto?? Según dice obtienes los datos en bruto

var datos = CKEDITOR.instances.editor1.getData();

[rodrypaladin]

Pues no funciona xd algo nos faltará por ahí jeje a ver si indago algo...