Verwenden Sie contentEditable in HTML5, um die Höhe mehrzeiliger text_html5-Tutorial-Tipps automatisch zu erhöhen

contentEditable ist eine globale Eigenschaft, die von Microsoft entwickelt, dekompiliert und von anderen Browsern verwendet wird. Die Hauptfunktion dieses Attributs besteht darin, Benutzern das Bearbeiten des Inhalts im Element zu ermöglichen. Daher muss das Element ein Element sein, das den Mausfokus erhalten kann, und dem Benutzer muss nach dem Klicken mit der Maus ein Caret angezeigt werden, um den Benutzer aufzufordern, dies zu tun Der Inhalt des Elements darf bearbeitet werden. Die contentEditable-Eigenschaft ist eine boolesche Eigenschaft, die als „true“ oder „false“ angegeben werden kann.

Darüber hinaus verfügt dieses Attribut auch über einen verborgenen Vererbungsstatus. Wenn das Attribut „true“ ist, wird das Element als „Bearbeitung zulassen“ gekennzeichnet, wenn das Attribut „false“ ist, wird das Element als „Bearbeitung nicht zulassend“ gekennzeichnet Bei „false“ wird es durch den Vererbungsstatus bestimmt. Wenn das übergeordnete Element des Elements bearbeitbar ist, ist das Element bearbeitbar.

Zusätzlich zum Attribut „contentEditable“ verfügt das Element auch über das Attribut „isContentEditable“. Wenn das Element bearbeitbar ist, ist dieses Attribut „true“.
Das Folgende ist ein Beispiel für die Verwendung des contentEditable-Attributs. Wenn das contentEditable-Attribut zu einem Listenelement hinzugefügt wird, können Leser mit diesem Beispiel im Browser experimentieren.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. /span>> 
2. Kopf> 
3. meta charset="UTF- 8"> 
4. title>conentEditalbe-Attributbeispiel Titel> 
5. Kopf> 
6. h2>Bearbeitbare Liste h2> 
7. ul contentEditable="true" > 
8. li>Listenelement 1 li> 
9. li>Listenelement 2 li> 
10. li>Listenelement 3 li> 
11. ul> 

Das Ergebnis nach der Ausführung dieses Codes ist wie folgt:

Zeilentext erhöht sich automatisch in der Höhe

Wenn es um mehrzeilige Textfelder geht, denkt jeder sofort an die Verwendung von Textarea, es gibt jedoch einen Nachteil: Sie können die Anzahl der Wörter nicht automatisch erhöhen entsprechende Spalten und Zeilen oder verwenden Sie direkt CSS, um die Breite zu erhöhen.

Zu bestimmten Zeiten ist immer noch eine automatische Erhöhung erforderlich, z. B. beim Eingabefeld, ähnlich wie beim Posten auf Weibo. Dies ist eine typische Anforderung: Das Textfeld hat eine Standardhöhe, und wenn der Eingabetext diese Höhe überschreitet, wird er automatisch vergrößert . Es muss eine maximale Grenze geben. Nach Überschreiten dieser Grenze wird eine vertikale Bildlaufleiste angezeigt.

Wenn Sie Textarea verwenden, um diese Anforderung zu erfüllen, müssen Sie auch mit js zusammenarbeiten, um Änderungen in der Texthöhe zu überwachen und die Höhe des Textfelds dynamisch zu ändern. Dies ist sehr unpraktisch, insbesondere auf der mobilen Seite, was unwissenschaftlich ist. Zu diesem Zeitpunkt können Sie das Attribut contenteditable verwenden.

Zum Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. div contenteditable="true" Klasse="box" id="Box" >
2.                                                       
3. div>
4. Stil>
.box{width:200px;max-height:100px;border:1px solid #ccc;overflow-y:auto;overflow-x:hidden;}
6. Stil>

Solange der Wert des contenteditable-Attributs als „true“ angegeben ist, wird das Div bearbeitbar und erhöht sich automatisch in der Höhe, wenn der Inhalt zunimmt. Dann geben wir dem Div eine maximale Höhe, um die oben genannten Anforderungen zu erfüllen.