Foros del Web » Programando para Internet » Jquery »

haciendo un max-length

Estas en el tema de haciendo un max-length en el foro de Jquery en Foros del Web. Tengo un div "editable" y necesito hacer un max-length sobre éste. Básicamente funciona bien pero no consigo hacerlo funcionar correctamente si una vez llegado al ...
  #1 (permalink)  
Antiguo 05/08/2013, 09:56
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 14 años
Puntos: 11
haciendo un max-length

Tengo un div "editable" y necesito hacer un max-length sobre éste.

Básicamente funciona bien pero no consigo hacerlo funcionar correctamente si una vez llegado al máximo de caracteres permitidos, selecciono todo o parte del texto y pulso una tecla (es decir, borro todo lo escrito y escribo el caracter de la tecla).

Código HTML:
Ver original
  1. <div id="texto" contenteditable="true">afds</div>

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     var lugar = '#texto';
  3.     var max = 10;
  4.     $(lugar).keyup(function(e){
  5.         contador(lugar,max,e);
  6.     }).keydown(function(e){
  7.         contador(lugar,max,e);
  8.     });
  9.  
  10.     function contador(lugar,max,e){
  11.         if(e.which != 8 && e.which != 37 && e.which != 38 && e.which != 39 && e.which != 40 &&
  12.         $(lugar).text().length > max)
  13.             {e.preventDefault();}
  14.     }
  15. });

Aqui el ejemplo por si no apetece copiar y pegar el codigo.

En realidad el problema no lo quiero abordar unica y exclusivamente mediante los eventos de teclado ya que puede seleccionarse el texto de multiples maneras: control+a, shift+flechas, seleccion manual con el raton,.... no obstante, cualquier ayuda sería bienvenida.

Un saludo y muchas gracias por vuestro tiempo.
  #2 (permalink)  
Antiguo 08/08/2013, 23:01
Avatar de fhederico  
Fecha de Ingreso: agosto-2009
Mensajes: 247
Antigüedad: 14 años, 10 meses
Puntos: 23
Respuesta: haciendo un max-length

Hola,

Consulta, esto lo quieres hacer por algo en especial con JS en tiempo real? lo otro, esto se envia en algun momento?

Veo dos soluciones a esto, puedes llenar el input con funciones para validarlo en tiempo real, ya que como tu mismo indicas pueden pegar con el mouse, o seleccionar, etc, lo mas "logico" seria validarlo cuando se envia esto o lo otro seria aplicarle un simple maxlength de html

Código:
<input name="hola" type="text" id="hola" maxlength="20" />
Saludos
__________________
Si encuentras que tu pregunta fue respondida, se agradeceria enormemente que la marcaras como solucionada... si... es el boton verde gigante que esta al final de la pagina :)
  #3 (permalink)  
Antiguo 11/08/2013, 04:43
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 14 años
Puntos: 11
Respuesta: haciendo un max-length

Cita:
Consulta, esto lo quieres hacer por algo en especial con JS en tiempo real? lo otro, esto se envia en algun momento?
Sí, lo necesito hacer con js para que el usuario vaya viendo en cada momento de cuantos caracteres dispone como máximo al escribir el mensaje. Lo valido más adelante, tanto con js antes del envio, como en el servidor, pero quiero hacerlo así porque es muy incomodo que, una vez escrito el mensaje te informen de que te has pasado del número de caracteres. Así es bastante más "amable".

Cita:
lo otro seria aplicarle un simple maxlength de html
El problema es que no se trata de un input, sino de un div con el atributo contenteditable, y los divs no admiten la propiedad maxlength, tan solo los inputs. Debo hacerlo ademas con un div porque se trata de un cuadro de texto en el que se genera un scroll y los inputs (concretamente es un textarea) de nuevo no generan el scroll que busco.
  #4 (permalink)  
Antiguo 11/08/2013, 08:14
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: haciendo un max-length

Hola oms02:
Lo que te presento es un simple script para un textarea (no es jquery: si lo estás utilizando para otras funciones será fácil adptarlo; si solo lo utilizas para esto, no será necesario cargar la librería).

La función que ve los caracteres es contador():
Código HTML:
Ver original
  1. <fieldset class="opinion"> 
  2.             <legend><strong>Mensaje</strong></legend>  
  3.                 <textarea name="mensaje" rows="8" style="width:100%;" id="mensaje" onkeydown="contador()" onkeyup="contador()"></textarea><br />
  4.                
  5.       Te quedan <input type="text" value ="1000" name = "caracteres" id = "caracteres" size="4" maxlength="4" readonly = "readonly" /> caracteres.              
  6.                 <br/>
  7.                 <span id="error_mensaje" class="mensajeerror" style="color:#993300;"></span>
  8.             <br />
  9.         </fieldset>

Código Javascript:
Ver original
  1. function contador() {
  2.     var num = document.getElementById("mensaje").value.length;
  3.     var tamanyo = 1000;
  4.     if (num > tamanyo) {
  5.         document.getElementById("mensaje").value = document.getElementById("mensaje").value.substring(0, tamanyo);
  6.         var mostrarerror = document.getElementById("error_mensaje");
  7.         mostrarerror.innerHTML = ("<br />Has llegado a la cantidad máxima de caracteres permitido");
  8.         return false
  9.     } else {
  10.         document.getElementById("caracteres").value = tamanyo - num;
  11.         return true
  12.     }
  13. }
  #5 (permalink)  
Antiguo 13/08/2013, 12:57
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 14 años
Puntos: 11
Respuesta: haciendo un max-length

Sí, lo mejor será que lo haga así. Muchas gracias txemaarbulo

Etiquetas: haciendo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:22.