Begrenzung der Anzahl der Zeichen in einem ContentEditable div

Ich bin mit contenteditable div-Elemente in meine web-Anwendung, und ich bin versucht zu kommen mit einer Lösung zu begrenzen die Menge der zulässigen Zeichen in die Gegend, und sobald das limit erreicht ist, versucht Sie, um Zeichen einzugeben tut sich einfach nichts. Dies ist, was ich habe, so weit:

var content_id = 'editable_div';

//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(){ check_charcount(content_id, max); });
$('#'+content_id).keydown(function(){ check_charcount(content_id, max); });

function check_charcount(content_id, max)
{   
    if($('#'+content_id).text().length > max)
    {
        $('#'+content_id).text($('#'+content_id).text().substring(0, max));
    }
}

Dies schränkt die Anzahl der Zeichen, um die angegebene Zahl von 'max', aber einmal die Gegend der text wird von der jquery .text () - Funktion der cursor setzt sich an den Anfang des Bereichs. Also, wenn der Benutzer hält auf Eingabe, werden die neu eingegebenen Zeichen werden eingefügt an den Anfang des Textes und das Letzte Zeichen des Textes werden entfernt. Also wirklich, ich muss nur einige Weg, um den cursor an das Ende des contenteditable-Bereich text.

InformationsquelleAutor der Frage Bill Dami | 2010-05-19

Wie über den übergang in die event Objekt Ihrer Funktion und Berufung e.preventDefault() wenn das max erreicht ist?

var content_id = 'editable_div';  

max = 10;

//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(e){ check_charcount(content_id, max, e); });
$('#'+content_id).keydown(function(e){ check_charcount(content_id, max, e); });

function check_charcount(content_id, max, e)
{   
    if(e.which != 8 && $('#'+content_id).text().length > max)
    {
       //$('#'+content_id).text($('#'+content_id).text().substring(0, max));
       e.preventDefault();
    }
}

Obwohl, müssen Sie möglicherweise ein wenig mehr zu tun um dem Benutzer zu erlauben, Dinge zu tun, wie 'löschen'.

EDIT:

Unterstützung für die 'löschen' - Taste.

EDIT 2:

Außerdem könnten Sie wahrscheinlich loszuwerden, die keyup handler. keydown sollte genug sein.

InformationsquelleAutor der Antwort user113716

19

Einen einfachen Weg, dies zu erreichen :
```
<div onkeypress="return (this.innerText.length <= 256)" contenteditable="true">
```
InformationsquelleAutor der Antwort Bala Velayutham
12

Erstens, diese Art der Sache ist irritierend für die Nutzer: ich würde vorschlagen, statt etwas zu tun, ähnlich StackOverflow ' s Kommentar-Feld, die Ihnen ermöglicht, geben Sie so viel oder so wenig, wie Sie möchten, zeigt Ihnen eine Meldung an, die besagt, wie viele Zeichen Sie eingegeben haben und ob es zu viele oder zu wenige, und weigert sich, lassen Sie uns einen Kommentar, dessen Länge nicht gültig.

Zweitens, wenn Sie wirklich müssen, beschränken Sie die Länge von text, ersetzen Sie den gesamten Inhalt der <div> auf jeden Tastendruck, wenn der Inhalt zu lang ist unnötig teuer, und der editor reagiert nicht mehr auf langsameren Maschinen. Ich schlage vor, die Handhabung der keypress event und einfach die Verhinderung der Charakter wird eingefügt, mit preventDefault() auf der Veranstaltung (oder im IE, Einstellung der Veranstaltung returnValue zu truevorausgesetzt, Sie sind mit attachEvent). Dies wird nicht verhindern, dass der Nutzer text einfügen, so müssen Sie behandeln die paste Ereignis (die existiert nicht in Opera oder Firefox < 3, also müssen Sie irgendeine Art von polling-basierten Lösung für die). Da Sie nicht in der Lage sein, um Zugriff auf die Inhalte eingefügt werden, im Voraus, haben Sie keine Möglichkeit zu wissen, ob die paste übernehmen Sie die Zeichen-Grenze, so müssen Sie einen timer einstellen, um überprüfen Sie die Länge wieder kurz nach der paste. Alles, was der Fall ist, ist die erste option scheint vorzuziehen zu mir.

InformationsquelleAutor der Antwort Tim Down

Folgende Lösung berücksichtigt auch die control-Tasten (die den nicht-druckbare Zeichen).

//Maximum number of characters
var max = 200;

$('#editable_div').keydown(function(e) {
    var keycode = e.keyCode;

    //List of keycodes of printable characters from:
    //http://stackoverflow.com/questions/12467240/determine-if-javascript-e-keycode-is-a-printable-non-control-character
    var printable = 
        (keycode > 47 && keycode < 58)   || //number keys
        keycode == 32 || keycode == 13   || //spacebar & return key(s) (if you want to allow carriage returns)
        (keycode > 64 && keycode < 91)   || //letter keys
        (keycode > 95 && keycode < 112)  || //numpad keys
        (keycode > 185 && keycode < 193) || //;=,-./` (in order)
        (keycode > 218 && keycode < 223);   //[\]' (in order)

    if (printable) {
        //Based on the Bala Velayutham's answer
        return $(this).text().length <= max; 
    }
});

InformationsquelleAutor der Antwort Vito Gentile

Dies ist der beste Weg, dies zu tun die meisten verallgemeinern form und nur zu große Arbeit für mich!

<div contenteditable="true" name="choice1" class="textfield" max="255"></div>

    $('.textfield').on("keypress paste", function (e) {
        if (this.innerHTML.length >= this.getAttribute("max")) {
            e.preventDefault();
            return false;
        }
    });

InformationsquelleAutor der Antwort VizardCrawler

$("[contenteditable=true]").keydown(function(e) {
    var max = $(this).attr("maxlength");
    if (e.which != 8 && $(this).text().length > max) {
        e.preventDefault();
    }
});

InformationsquelleAutor der Antwort Yuval Perelman

var onKeyPress = function () {
    var keyCode = window.event.keyCode,
        isNumeric = (keyCode > 47 && keyCode < 58),
        isNotEnterKey = !!(window.event.keyCode !== 13);

        (isNotEnterKey) || (this.blur());

        return (isNumeric && this.innerText.length < 3);
};

InformationsquelleAutor der Antwort shawndumas

Einer allgemeineren revision von @user113716 Antwort, die nicht arbeiten, für mehrere contenteditable Felder (es zählt die Gesamtzahl der Zeichen für alle Elemente, die passend zu den bestimmten id, so können Sie nur max Zeichen insgesamt auf der Seite).

Diese Lösung ermöglicht die Verwendung einer Allgemeinen Klasse, und begrenzt die Anzahl der Zeichen in jedem contenteditable Feld unabhängig.

html:

<div contenteditable="true" name="choice1" class="textfield"></div>

Und die JavaScript:

MAX_TEXTINPUT = 10;
TEXTFIELD_CLASS = "textfield"

$(document).ready(function() {

    //binding keyup/down events on the contenteditable div
    $('.'+TEXTFIELD_CLASS).keydown(function(e){ check_charcount(TEXTFIELD_CLASS, MAX_TEXTINPUT, e); });

})

function check_charcount(inputclass, max, e) {   
    var focused = $(document.activeElement)

    if(focused.hasClass(inputclass) && e.which != 8 && $(focused).text().length >= max)
    {
        e.preventDefault();
    }
}

InformationsquelleAutor der Antwort Wes Modes

Wenn Sie möchten, um Sie mit Klassen arbeiten. In anderen Worten, das element wäre in der Lage zu teilen Klassennamen und haben immer noch Ihre eigenen einzigartigen count:

var content_id = '.myclass';  

max = 1;
//binding keyup/down events on the contenteditable div
$(content_id).keyup(function(e){ check_charcount(this, max, e); });
$(content_id).keydown(function(e){ check_charcount(this, max, e); });

function check_charcount(elem, max, e){   
    if(e.which != 8 && $(elem).text().length >= max){       
        e.preventDefault();
    }
}

InformationsquelleAutor der Antwort Al Serize

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.