haciendo un max-length

[oms02]

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:

<div id="texto" contenteditable="true">afds</div>
 

Código Javascript:

$(document).ready(function(){
    var lugar = '#texto';
    var max = 10;
    $(lugar).keyup(function(e){
        contador(lugar,max,e);
    }).keydown(function(e){
        contador(lugar,max,e);
    });
 
    function contador(lugar,max,e){
        if(e.which != 8 && e.which != 37 && e.which != 38 && e.which != 39 && e.which != 40 && 
        $(lugar).text().length > max)
            {e.preventDefault();}
    }
});
 

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.

[fhederico]

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

[oms02]

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".

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.

[txemaarbulo]

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:

<fieldset class="opinion">  
            <legend><strong>Mensaje</strong></legend>   
                <textarea name="mensaje" rows="8" style="width:100%;" id="mensaje" onkeydown="contador()" onkeyup="contador()"></textarea><br />
                
      Te quedan <input type="text" value ="1000" name = "caracteres" id = "caracteres" size="4" maxlength="4" readonly = "readonly" /> caracteres.              
                <br/>
                <span id="error_mensaje" class="mensajeerror" style="color:#993300;"></span>
            <br />
        </fieldset>
 

Código Javascript:

function contador() {
    var num = document.getElementById("mensaje").value.length;
    var tamanyo = 1000;
    if (num > tamanyo) {
        document.getElementById("mensaje").value = document.getElementById("mensaje").value.substring(0, tamanyo);
        var mostrarerror = document.getElementById("error_mensaje");
        mostrarerror.innerHTML = ("<br />Has llegado a la cantidad máxima de caracteres permitido");
        return false
    } else {
        document.getElementById("caracteres").value = tamanyo - num;
        return true
    }
}
 

[oms02]

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