Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV

Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV
Seit der Einführung des contentEditable-Attributs in HTML5 kann div genau wie textarea als am häufigsten verwendeter Editor verwendet werden.
1. Div als Editor aktivieren <br />Es ist ganz einfach, Div in den Bearbeitungsstatus zu versetzen. Sie müssen lediglich Folgendes tun:

Code kopieren
Der Code lautet wie folgt:

div.contentEditable=true;

Dadurch gelangen Sie in den Bearbeitungsmodus. Natürlich können Sie contenteditable auch direkt in HTML festlegen.
Zur visuellen Bearbeitung können Sie im Allgemeinen zwei Methoden verwenden: contentEditable und designMode. ContentEditable wurde zuerst im Internet Explorer implementiert und später wurde es nach und nach von den wichtigsten Browsern unterstützt. Auch der HTML5-Standard umfasste contentEditable. designMode kann nur das gesamte Dokument in einen editierbaren Zustand versetzen, aber contentEditable kann jedes HTML-Element in einen editierbaren Zustand versetzen. Sein Anwendungsbereich ist breiter als designMode. Die Verwendung von contentEditable ist der Trend der Zukunft.
ContentEditable und draggable stehen manchmal im Konflikt miteinander. Wenn contentEditable=true ist, sollte draggable (sofern vorhanden) im Allgemeinen auf false gesetzt werden, da es sonst nicht bearbeitet werden kann.
2. Wenn Sie den Div-Inhalt bearbeiten, drücken Sie die Eingabetaste, um die Änderung zu bestätigen :
Diese Implementierung ist sehr einfach. Bestimmen Sie einfach den Schlüsselwert des Ereignisses im Ereignisrückruf:

Code kopieren
Der Code lautet wie folgt:

htmlElement.contentEditable = false;
wenn (event.keyCode == 13) {
htmlElement.blur();
}

3. Bestimmen Sie, ob Umschalt+Eingabe gedrückt ist. Wenn die Taste gedrückt ist, wird die Zeile umbrochen. <br />Das Implementierungsprinzip ist das gleiche wie oben und relativ einfach:

Code kopieren
Der Code lautet wie folgt:

wenn(event.shiftKey && event.keyCode==13) {
zurückkehren;
}

Dies ist in Chrome implementiert. Es ist keine Verarbeitung erforderlich, nur eine direkte Rückgabe. In FireFox müssen Sie <br> hinzufügen, um Zeilenumbrüche zu erzielen:

Code kopieren
Der Code lautet wie folgt:

wenn(event.shiftKey && event.keyCode==13) {
var text = htmlElement.textContent;
htmlElement.innerHTML = Text + '
';
zurückkehren;
}

4. Beim Bearbeiten von Div-Inhalten sind Zeilenumbrüche verboten . <br />Hier sind mehrere CSS-Eigenschaften im Zusammenhang mit der Handhabung von Inhaltsbearbeitungen über das Limit hinaus:

Code kopieren
Der Code lautet wie folgt:

Breite: 80px; ----Diese Zeile begrenzt die Breite des Div.
text-overflow:clip; ---Zusätzlicher Text wird weder umbrochen noch weggelassen. (Wenn diese Zeile auf Auslassungspunkte eingestellt ist, wird bei einem Überlauf ein Auslassungszeichen (...) angezeigt.)
white-space:nowrap; -----Erzwingt, dass der Text in einer Zeile erscheint
overflow:hidden; ------------------Überlauftext ausblenden
word-wrap: break-word;------Automatischen Zeilenumbruch festlegen

Normalerweise kann durch Festlegen der ersten beiden der gewünschte Effekt erzielt werden. Wenn weitere Anforderungen bestehen, können Sie die folgenden Attribute hinzufügen.
5. Entfernen Sie während der Bearbeitung den Fokusrahmen um das Div
 Legen Sie in CSS einfach „outline:none“ oder „outline:0“ fest.
6. Gesamten Text auswählen, nachdem Div in den Bearbeitungsstatus wechselt. <br />Dies lässt sich mit der Methode „modify(alter, direction, granularity)“ des Auswahlobjekts erreichen. Mit dieser Methode können Sie die Position des Fokus ändern oder die Auswahl vergrößern bzw. verkleinern. Mit dieser Methode können verschiedene Operationen, wie etwa die Auswahl von allem oder das Verschieben des Fokus, implementiert werden. Hier sind die Bedeutungen der Parameter:
ändern: die Art und Weise der Veränderung. Mit „Verschieben“ lässt sich der Fokus verschieben, mit „Erweitern“ lässt sich die Auswahl ändern.
Richtung: die Bewegungsrichtung. Optionale Werte sind vorwärts | rückwärts oder links | rechts.
Granularität: Die Einheit oder Größe der Bewegung. Optionale Werte: „Zeichen“, „Wort“, „Satz“, „Zeile“, „Absatz“, „Zeilengrenze“, „Satzgrenze“, „Absatzgrenze“ oder „Dokumentgrenze“.
Diese Funktion wird nur von Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1 und späteren Versionen unterstützt. Offizielle Dokumentation: https://developer.mozilla.org/en/DOM/Selection/modify.
Das folgende Beispiel wählt den gesamten Text aus, wenn das Div in den Bearbeitungsstatus wechselt:

Code kopieren
Der Code lautet wie folgt:

wenn (window.getSelection) {
var sel = window.getSelection();
sel.modify('verschieben','links','Dokumentgrenze');
sel.modify('erweitern','rechts','Dokumentgrenze');
}

Leider unterstützt die Implementierung von FireFox die Parameter „sentence“, „paragraph“, „lineboundary“, „sentenceboundary“, „paragraphboundary“ und „documentboundary“ nicht. Sie müssen Ihre Denkweise ändern und zur Implementierung den Zeilenparameter verwenden:

Code kopieren
Der Code lautet wie folgt:

var istFireFox = function() {
var ua = navigator.userAgent.toLowerCase();
return !!ua.match(/firefox\/([\d.]+)/);
};
wenn (istFireFox()) {
Variablenanzahl = htmlElement.innerHTML.split('
').Länge;
für (var i = 0; i < Anzahl; i++) {
sel.modify('erweitern', 'rechts', 'Zeile');
}
}

7. Stellen Sie die Bildlaufleiste des Div so ein, dass automatisch zur letzten Position gescrollt wird
 Hier werden mehrere nützliche Eigenschaften von div verwendet: scrollTop, scrollLeft, scrollWidth, scrollHeight. Schauen wir uns das folgende Implementierungsbeispiel an:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" Inhalt="text/html; Zeichensatz=utf-8" />
<meta name="keywords" content="Scrollbar, Bildlaufleiste, Seitenende, Chat-Fenster, " />
<meta name="description" content="Manchmal (z. B. beim Entwickeln eines Chat-Programms) müssen wir die Bildlaufleiste unten lassen. Beispielsweise sollten in einem Chat-Fenster die zuletzt gesendeten und empfangenen Nachrichten unten angezeigt werden. Wenn Sie den Inhalt unten sehen möchten, müssen Sie die Bildlaufleiste unten lassen."/>
<title>So bleibt die Bildlaufleiste unten - Bildlaufleiste, Seitenende, Chatfenster, </title>
</Kopf>
<Text>
<div id="Beispiel">
<h3 id="example_title">So bleibt die Bildlaufleiste unten</h3>
<div id="hauptbeispiel">
<!--**************************************** Beispielcode beginnt*************************************-->
<Skripttyp="text/javascript">
Funktion add()
{
var jetzt = neues Datum();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + jetzt.getTime() + '
';
div.scrollTop = div.scrollHeight;
}
</Skript>
<span class="notice">Bitte klicken Sie auf die Schaltfläche „Zeile einfügen“, um die neuesten Informationen einzufügen. Wenn die Bildlaufleiste angezeigt wird, bleibt sie automatisch unten. </span>

<div id="scrolldIV" style="overflow:auto; Höhe: 100px; Breite: 400px; Rahmen: 1px durchgezogen #999;"></div>
<input type="button" value="Zeile einfügen" onclick="add();">
<!--************************************* Ende des Beispielcodes*****************************************-->
</div>
</div>
</body>
</html>

Um nach unten zu scrollen, setzen Sie einfach div.scrollTop = div.scrollHeight;. scrollHeight ist die absolute Breite des inneren Elements, einschließlich des verborgenen Teils des inneren Elements. Dasselbe gilt für scrollLeft. Wenn Sie ganz nach rechts scrollen, setzen Sie einfach div.scrollLeft = div.scrollWidth;.
Darüber hinaus kann die Position der Bildlaufleiste einfach gesteuert werden, indem die OffsetHeight- und OffsetLeft-Eigenschaften von div und andere zugehörige Messeigenschaften kombiniert werden.
8. Höhenanpassung des Div-Eingabefelds <br />Höhenanpassung bedeutet, dass mit zunehmender Anzahl der Eingabezeilen das Eingabefeld immer höher wird und ab einer bestimmten Höhe eine vertikale Bildlaufleiste angezeigt wird.
Als mehrzeiliges Textfeld erfüllt Textarea die meisten unserer Anforderungen. Ein Nachteil von Textareas besteht jedoch darin, dass sie sich nicht wie gewöhnliche Div-Tags an den Inhalt anpassen können. Der Textbereich hat immer eine feste Höhe. Wenn Sie das Textfeld hochgradig anpassungsfähig gestalten möchten, um das interaktive Erlebnis zu verbessern, treten manchmal Probleme auf. Natürlich können Sie weiterhin JS verwenden, um die Höhe zu steuern und Anpassungsfähigkeit zu erreichen. Tatsächlich können wir hier div verwenden, um diesen Effekt zu simulieren. Hier ist eine Implementierung von einem Internetnutzer:
HTML Quelltext:

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Testbox" contenteditable="true"></div>

Der entsprechende CSS-Code:

Code kopieren
Der Code lautet wie folgt:

.testbox {
Breite: 400px;
Mindesthöhe: 120px;
maximale Höhe: 300px;
Rand links: automatisch;
Rand rechts: automatisch;
Polsterung: 3px;
Umriss: 0;
Rand: 1px durchgezogen #a0b3d6;
Schriftgröße: 12px;
Zeilenumbruch: Wort umbrechen;
Überlauf-x: versteckt;
Überlauf-y: automatisch;
}

Tatsächlich stammen viele Implementierungen aus dem Internet. Ich möchte allen Internetnutzern hier meinen aufrichtigen Dank aussprechen! Es gibt noch viele andere Möglichkeiten, viele der hier aufgeführten Probleme zu lösen. Wir ermutigen dennoch alle, positiv zu denken und sich das entsprechende Wissen anzueignen!

<<:  Lösung für die in Firefox oder IE nicht ermittelte Spannweite

>>:  Zwei Bilder von JavaScript zum Verständnis der Prototypenkette

Artikel empfehlen

Beschreibung des MySQL-Optimierungsparameters query_cache_limit

query_cache_limit query_cache_limit gibt die Puff...

So konfigurieren Sie Linux CentOS für die regelmäßige Ausführung von Skripten

Oft möchten wir, dass der Server regelmäßig ein S...

Detaillierte Erläuterung des Ausführungsprozesses der MySQL-Update-Anweisung

Es gab bereits einen Artikel über den Ausführungs...

Implementierung von Vergleichen, Sortieren und anderen Operationen für Daten vom Typ varchar in MySQL

Bei der Verwendung von MySQL werden Daten im Allg...

Beispiel für die Implementierung von Textumbruch in HTML (gemischter Text und Bilder in HTML)

1. Text rund um das Bild Wenn wir zum Beispiel di...

Detaillierte Erläuterung der Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript

Inhaltsverzeichnis 1. JavaScript verwendet Canvas...

Beispiele für neue Selektoren in CSS3

Struktureller (Position) Pseudoklassenselektor (C...

Über MySQL innodb_autoinc_lock_mode

Der Parameter innodb_autoinc_lock_mode steuert da...

Detaillierte Erklärung zur Lösung des Problems „Position: Fester fester Positionierungsversatz“

Frage Die feste CSS-Positionierung position:fixed...

Detaillierte Untersuchung der Verwendung der Positionierung in CSS (Zusammenfassung)

Einführung in die Positionierung in CSS position ...

JavaScript realisiert die Generierung und Überprüfung von Zufallscodes

Die Generierung und Überprüfung von Zufallscodes ...

JavaScript zum Erzielen eines einfachen Lupeneffekts

In einem großen Kästchen befindet sich ein Bild. ...

Detaillierte Erklärung der Bedeutung und des Unterschieds zwischen MySQL-Zeilensperren und Tabellensperren

1. Einleitung Der Unterschied zwischen Zeilensper...

Eine kurze Diskussion über die MySQL-Optimierungslösung für große Tabellen

Hintergrund Die Menge neuer Daten in der Geschäft...

Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen

Ich habe meiner persönlichen Website vor Kurzem e...