요소의 내용을 편집할 수 있는지 여부를 지정하는 HTML 속성 contenteditable
- 黄舟원래의
- 2017-11-03 10:04:183085검색
예
편집 가능한 단락:
<p contenteditable="true">这是一个可编辑的段落。</p>
브라우저 지원
IE
Firefox
Chrome
Safari
Opera
모든 주요 브라우저 콘텐츠 편집 가능한 property를 지원하세요.
정의 및 사용법
contenteditable 속성은 요소의 콘텐츠를 편집할 수 있는지 여부를 지정합니다.
참고: 요소가 contenteditable 속성을 설정하지 않으면 요소는 상위 요소에서 이 속성을 상속합니다.
HTML 4.01과 HTML5의 차이점
contenteditable 속성은 HTML5의 새로운 기능입니다.
Syntax
<element contenteditable="true|false">
속성 값
| Value | Description |
| true | 요소가 편집 가능함을 지정합니다. |
| false | 요소를 편집할 수 없도록 지정합니다. |
HTML에서는 커서가 개체이고 커서 개체는 요소를 선택할 때만 나타납니다.
입력 상자를 클릭하면 실제로 선택 개체 선택이 생성됩니다(즉, 볼 수 있는 텍스트가 파란색으로 변하는 영역). 선택은 Firefox 브라우저window .getSelection()에서 직접 사용할 수 있습니다. HTML에서는 선택 항목이 하나만 있고 선택 영역은 시작과 끝이 있는 직사각형으로 상상할 수 있습니다. 입력 상자를 클릭하거나 다른 입력 상자로 전환하면 그에 따라 선택이 변경됩니다. 커서는 선택 영역 안에 있습니다. 커서는 선택 영역과 마찬가지로 시작점과 끝점이 있습니다. 텍스트에서 왼쪽 버튼을 누르고 오른쪽으로 당기면 텍스트가 파란색으로 바뀌는 것을 확인하세요. 이것이 바로 커서의 시작과 끝입니다. 직접 클릭하면 커서가 깜박이지만 실제로는 시작과 끝 지점만 겹치는 것입니다.
자, 이제 실제로 커서를 조작해 보겠습니다. 전체 코드를 보고 효과를 확인해 보세요.
<!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>
위 내용은 요소의 내용을 편집할 수 있는지 여부를 지정하는 HTML 속성 contenteditable의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!