Web-Frontend
HTML-Tutorial
HTML-Attribut contenteditable, das angibt, ob der Inhalt eines Elements bearbeitet werden kann
HTML-Attribut contenteditable, das angibt, ob der Inhalt eines Elements bearbeitet werden kann
Beispiel
Ein bearbeitbarer Absatz:
<p contenteditable="true">这是一个可编辑的段落。</p>
Browser-Unterstützung
IE
Firefox
Chrome
Safari
Opera
Alle gängigen Browser unterstützen das contenteditable -Attribut.
Definition und Verwendung
Das contenteditable-Attribut gibt an, ob der Inhalt des Elements bearbeitet werden kann.
Hinweis: Wenn das Element das contenteditable-Attribut nicht festlegt, erbt das Element dieses Attribut von seinem übergeordneten Element.
Unterschiede zwischen HTML 4.01 und HTML5
Das contenteditable-Attribut ist neu in HTML5.
Syntax
<element contenteditable="true|false">
Attributwert
| 值 | 描述 |
| true | 规定元素可编辑。 |
| false | 规定元素不可编辑。 |
In HTML ist der Cursor ein Objekt und das Cursorobjekt erscheint nur, wenn Sie ein Element auswählen.
Wenn wir auf ein Eingabefeld klicken, wird tatsächlich ein Auswahlobjekt generiert (der Bereich, in dem der Text, den wir sehen, blau wird). Die Auswahl befindet sich in Firefox. Das Objekt kann direkt abgerufen werden Mit window.getSelection() gibt es nur eine Auswahl, und die Auswahl ist ein Rechteck, das einen Anfang und ein Ende hat.
Wenn Sie auf eine Eingabe klicken Wenn Sie in ein anderes Eingabefeld wechseln oder in ein anderes Eingabefeld wechseln, ändert sich die Auswahl entsprechend. Der Cursor befindet sich innerhalb der Auswahl. Er ist ein Fragmentbereich, der einen Startpunkt und einen Endpunkt hat Sehen Sie, dass der Text blau wird. Wenn wir direkt klicken, blinkt der Cursor, aber tatsächlich sind es nur die Start- und Endpunkte, die sich überlappen.
OK, jetzt bedienen wir tatsächlich den Cursor. Schauen Sie sich einfach den vollständigen Code an und sehen Sie den Effekt.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style>#edit{height:500px;width:500px;border:1px solid red;}</style></head><body>
<div id="edit" contenteditable></div>
<input type="text" id="emojiInput">
<button id="sendEmoji">发送表情</button>
<script>
var sendEmoji = document.getElementById('sendEmoji') // 定义最后光标对象
var lastEditRange; // 编辑框点击事件
document.getElementById('edit').onclick = function() { // 获取选定对象
var selection = getSelection() // 设置最后光标对象
lastEditRange = selection.getRangeAt(0)
} // 编辑框按键弹起事件
document.getElementById('edit').onkeyup = function() { // 获取选定对象
var selection = getSelection() // 设置最后光标对象
lastEditRange = selection.getRangeAt(0)
} // 表情点击事件
document.getElementById('sendEmoji').onclick = function() { // 获取编辑框对象
var edit = document.getElementById('edit') // 获取输入框对象
var emojiInput = document.getElementById('emojiInput') // 编辑框设置焦点
edit.focus() // 获取选定对象
var selection = getSelection() // 判断是否有最后光标对象存在
if (lastEditRange) { // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges()
selection.addRange(lastEditRange)
} // 判断选定对象范围是编辑框还是文本节点
if (selection.anchorNode.nodeName != '#text') { // 如果是编辑框范围。则创建表情文本节点进行插入
var emojiText = document.createTextNode(emojiInput.value)
if (edit.childNodes.length > 0) { // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
for (var i = 0; i < edit.childNodes.length; i++) { if (i == selection.anchorOffset) {
edit.insertBefore(emojiText, edit.childNodes[i])
}
}
} else { // 否则直接插入一个表情元素
edit.appendChild(emojiText)
} // 创建新的光标对象
var range = document.createRange() // 光标对象的范围界定为新建的表情节点
range.selectNodeContents(emojiText) // 光标位置定位在表情节点的最大长度
range.setStart(emojiText, emojiText.length) // 使光标开始和光标结束重叠
range.collapse(true) // 清除选定对象的所有光标对象
selection.removeAllRanges() // 插入新的光标对象
selection.addRange(range)
} else { // 如果是文本节点则先获取光标对象
var range = selection.getRangeAt(0) // 获取光标对象的范围界定对象，一般就是textNode对象
var textNode = range.startContainer; // 获取光标位置
var rangeStartOffset = range.startOffset; // 文本节点在光标位置处插入新的表情内容
textNode.insertData(rangeStartOffset, emojiInput.value) // 光标移动到到原来的位置加上新内容的长度
range.setStart(textNode, rangeStartOffset + emojiInput.value.length) // 光标开始和光标结束重叠
range.collapse(true) // 清除选定对象的所有光标对象
selection.removeAllRanges() // 插入新的光标对象
selection.addRange(range)
} // 无论如何都要记录最后光标对象
lastEditRange = selection.getRangeAt(0)
} </script></body></html>Das obige ist der detaillierte Inhalt vonHTML-Attribut contenteditable, das angibt, ob der Inhalt eines Elements bearbeitet werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
