Wie Zeicheneingabe in contenteditable innerhalb einer HTML-Tabelle zu begrenzen

Question

Ich verwende derzeit eine HTML-Tabelle innerhalb meiner Webseite, um dem Benutzer die Eingabe bestimmter Details zu ermöglichen. Da die Zeicheneingabe jedoch nicht begrenzt ist, kann die Tabelle stark gestreckt werden, wenn der Benutzer so viele Zeichen eingibt, wie er möchte.

Ich habe mich gefragt, wie man diese Zufriedenheit begrenzen kann, um dies zu verhindern?

Unten ist ein Ausschnitt aus dem Code, den ich für den Tisch

<tr> 
<td>One Off Capital</td> 
<td><div contenteditable> </div></td> 
<td><div contenteditable> </div></td> 
</tr> 

ich jedoch zu einem ähnlichen Problem unter diesem Link verwenden sind neu in jQuery und einem Amateur-Entwickler gefunden habe, ich kämpfen würde zu verstehen die gegebenen Antworten und wie ich sie benutzen kann.

Limiting Number of Characters in a ContentEditable div

Answer 1

Sie können etwas tricky mit keypress() Ereignishandler tun. Verhindern keypress Ereignis, wenn der Inhalt größer ist als Ihr Limit ist durch false

UPDATE Rückkehr: hinzufügen Zuhörer paste Ereignis. Überprüfen Sie dann die Inhaltslänge. Verhindere auch die Option "Ziehen", um das Ziehen von Inhalten zu verhindern.

var limit = 10; 
 
$('div[contenteditable]').keypress(function() { 
 
    return this.innerHTML.length < limit; 
 
}).on({ 
 
    'paste': function(e) { 
 
    var len = this.innerHTML.length, 
 
     cp = e.originalEvent.clipboardData.getData('text'); 
 
    if (len < limit) 
 
     this.innerHTML += cp.substring(0, limit - len); 
 
    return false; 
 
    }, 
 
    'drop': function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<tr> 
 
    <td>One Off Capital</td> 
 
    <td> 
 
    <div contenteditable></div> 
 
    </td> 
 
    <td> 
 
    <div contenteditable></div> 
 
    </td> 
 
</tr>

Answer 2

hinzufügen eine Überlaufpolitik, so etwas wie:

<div style="width: 300px; overflow: auto;" contenteditable="contenteditable"></div> 

Wenn Sie wissen, wie CSS-Klassen, die Verwendung zu verwenden.

Answer 3

Ich habe die jQuery Bind Funktion verwendet, die eine Funktion 'editableContentChanged' aufruft, wenn ein div eines der folgenden Ereignisse auftritt 'blur keyup paste kopieren cut mouseup'. Sie können die Dokumentation betrachten und der Bindefunktion bei Bedarf Ereignisse hinzufügen. Die Funktion editableContentChanged ersetzt zuerst den Inhalt des editierbaren div und ruft dann die Methode setCaret auf, die den Cursor an das Ende des Inhalts setzt. Heres ein funktionierendes Beispiel https://jsfiddle.net/vacfkono/4/
HTML

<tr> 
<td>One Off Capital</td> 
<td><div contenteditable>fadsfasd </div></td> 
<td><div contenteditable> fasdfasd </div></td> 
</tr> 

Javascript/jQuery

$(document).ready(function() { 
     $('div').bind('blur keyup paste copy cut mouseup', editableContentChanged); 
    }); 

var maxLength = 20; 
function editableContentChanged() { 
    if($(this).html().length >= maxLength) { 
     $(this).html($(this).html().substring(0, maxLength-1)); 
     setCaret(this); 
    } 
} 

function setCaret(el) { 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
    range.setStart(el.childNodes[0], 19); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    el.focus(); 
}