Heim > Artikel > Web-Frontend > 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
- 黄舟Original
- 2017-11-03 10:04:183086Durchsuche
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!