Begrenzung der Zeichenanzahl in einem ContentEditable div

Ich verwende contenteditable div Elemente in meiner Webanwendung und ich versuche, eine Lösung zu finden, um die Anzahl der in dem Bereich zulässigen Zeichen zu begrenzen, und sobald die Grenze erreicht ist, führt der Versuch, Zeichen einzugeben, einfach zu nichts.

Das habe ich bisher:

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));
    }
}

Das tut Beschränken Sie die Anzahl der Zeichen auf die durch ‘max’ angegebene Anzahl, sobald jedoch der Text des Bereichs durch die Funktion jQuery .text() festgelegt wurde, setzt sich der Cursor selbst an den Anfang des Bereichs zurück.

Wenn der Benutzer also weiterschreibt, werden die neu eingegebenen Zeichen am Anfang des Textes eingefügt und das letzte Zeichen des Textes entfernt. Also wirklich, ich brauche nur eine Möglichkeit, den Cursor am Ende des Textes des bearbeitbaren Bereichs zu halten.

Übergeben Sie die event Einspruch gegen Ihre Funktion und Aufruf e.preventDefault() wenn das Maximum 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();
    }
}

Möglicherweise müssen Sie jedoch etwas mehr tun, damit der Benutzer Dinge wie “Löschen” ausführen kann.

Außerdem könntest du die wahrscheinlich loswerden keyup Handler. keydown sollte genug sein.

Dies ist die Art und Weise, wie ich es durch jQuery-Bindung gemacht habe, was es mir leicht macht, indem ich einfach eine Eigenschaft data-input-length zu einem inhaltsbearbeitbaren Element hinzufüge.

Fügen Sie einfach den JavaScript-Code irgendwo in Ihrem Dokument hinzu.

$(document).ready(function(){
    // Excempt keys(arrows, del, backspace, home, end);
    var excempt = [37,38,39,40,46,8,36,35];
    // Loop through every editiable thing
    $("[contenteditable="true"]").each(function(index, elem) {
        var $elem = $(elem);
        // Check for a property called data-input-length="value" (<div contenteditiable="true" data-input-length="100">)
        var length = $elem.data('input-length');
        // Validation of value
        if(!isNaN(length)) {
            // Register keydown handler
            $elem.on('keydown', function(evt) {
                // If the key isn't excempt AND the text is longer than length stop the action.
                if(excempt.indexOf(evt.which) === -1 && $elem.text().length > length) {
                   evt.preventDefault();
                   return false;
                }
            });
        }
    });
});

div {
  background-color: #eee;
  border: 1px solid black;
  margin: 5px;
  width: 300px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div contenteditable="true" data-input-length="100">
    You can type a 100 characters here
</div>
<div contenteditable="true" data-input-length="150">
    You can type a 150 characters here
</div>
<div contenteditable="true" data-input-length="10">
    You can type a 10 characters here
</div>

Erstens ist so etwas für den Benutzer irritierend: Ich würde vorschlagen, stattdessen etwas Ähnliches wie das Kommentarfeld von Stack Overflow zu tun, das Ihnen erlaubt, so viel oder so wenig einzugeben, wie Sie möchten, und Ihnen eine Meldung anzeigt, die Ihnen sagt, wie viele Zeichen Sie haben eingegeben und ob es zu viele oder zu wenige sind, und verweigert Ihnen die Abgabe eines Kommentars, dessen Länge ungültig ist.

Zweitens, wenn Sie wirklich die Länge des Textes begrenzen müssen, ersetzen Sie den gesamten Inhalt des <div> bei jedem Tastendruck, wenn der Inhalt zu lang ist, ist unnötig teuer und führt dazu, dass der Editor auf langsameren Computern nicht mehr reagiert. Ich schlage vor, mit dem umzugehen keypress Ereignis und einfach das Einfügen des Zeichens mit verhindern preventDefault() auf der Veranstaltung (bzw Internet ExplorerFestlegen des Ereignisses returnValue zu truevorausgesetzt, Sie verwenden attachEvent).

Dies wird den Benutzer nicht daran hindern, Text einzufügen, also müssen Sie sich darum kümmern paste Ereignis (das nicht existiert in Oper oder Firefox < 3, also brauchen Sie dafür eine abfragebasierte Lösung). Da Sie nicht im Voraus auf den einzufügenden Inhalt zugreifen können, haben Sie keine Möglichkeit zu wissen, ob Sie durch das Einfügen die Zeichenbeschränkung überschreiten. Daher müssen Sie einen Timer einstellen, um die Länge in Kürze erneut zu überprüfen nach der Paste. In Anbetracht dessen scheint mir die erste Option vorzuziehen.

Dies ist der beste Weg, dies in der allgemeinsten Form zu tun, und es funktioniert einfach großartig 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;
        }
    });