Maison > Article > interface Web > Attribut HTML contenteditable qui spécifie si le contenu d'un élément est modifiable
Attribut HTML contenteditable qui spécifie si le contenu d'un élément est modifiable
- 黄舟original
- 2017-11-03 10:04:183140parcourir
Exemple
Un paragraphe modifiable :
<p contenteditable="true">这是一个可编辑的段落。</p>
Prise en charge du navigateur
IE
Firefox
Chrome
Safari
Opera
Tous les principaux navigateurs prennent en charge l'attribut contenteditable .
Définition et utilisation
L'attribut contenteditable spécifie si le contenu de l'élément est modifiable.
Remarque : Si l'élément ne définit pas l'attribut contenteditable, l'élément héritera de cet attribut de son élément parent.
Différences entre HTML 4.01 et HTML5
L'attribut contenteditable est nouveau en HTML5.
Syntaxe
<element contenteditable="true|false">
Valeur de l'attribut
| 值 | 描述 |
| true | 规定元素可编辑。 |
| false | 规定元素不可编辑。 |
En HTML, le curseur est un objet, et l'objet curseur n'apparaît que lorsque vous sélectionnez un élément apparu.
Lorsque nous cliquons sur une zone de saisie, cela générera en fait un objet de sélection (la zone où le texte que nous pouvons voir devient bleu. La sélection est dans Firefox L'objet peut être obtenu directement). en utilisant window.getSelection(). En HTML, il n'y a qu'une seule sélection, et la sélection est une zone. Vous pouvez l'imaginer comme un rectangle, qui a un début et une fin
Lorsque vous cliquez sur une entrée. ou passez à une autre zone de saisie, la sélection changera en conséquence. Le curseur est à l'intérieur de la sélection. Le curseur est appelé plage. C'est une zone de fragment, comme la sélection, il a un point de départ et un point de fin. Lorsque nous appuyons sur le bouton gauche sur le texte et le tirons vers la droite. voyez que le texte devient bleu. C'est le début et la fin du curseur. Quand on clique directement, le curseur clignote, mais en fait ce sont juste les points de début et de fin qui se chevauchent.
OK, faisons maintenant fonctionner le curseur. Regardez simplement le code complet et voyez l’effet.
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!