HTML5 编辑区域属性 contenteditable 的使用与监听
时间: 2024-03-08 08:47:23 浏览: 50
HTML5 的 `contenteditable` 属性用于指示一个元素是否可编辑。当该属性设置为 `true` 时,用户可以编辑元素内的文本内容。可以在任何 HTML 元素上使用 `contenteditable` 属性,包括 `div`、`span`、`p` 等。
要监听一个 `contenteditable` 元素的变化,需要使用 `input` 或 `keydown` 事件。例如,下面的代码监听一个 `div` 元素的 `input` 事件:
```html
<div contenteditable="true" id="editable-div">可编辑的内容</div>
<script>
const editableDiv = document.querySelector('#editable-div');
editableDiv.addEventListener('input', () => {
console.log('内容已被修改:', editableDiv.innerHTML);
});
</script>
```
此示例将在 `div` 元素中输入文本时,将文本打印到控制台。请注意,`contenteditable` 元素的内容可以通过 `innerHTML` 属性访问和修改。
还可以使用 `document.execCommand()` 方法执行编辑命令,例如 `document.execCommand('bold', false, null)` 将所选文本加粗。可以在 `contenteditable` 元素的上下文菜单或自定义工具栏中使用此方法。
```html
<div contenteditable="true" id="editable-div">可编辑的内容</div>
<button onclick="document.execCommand('bold', false, null)">加粗</button>
```
此示例将在点击“加粗”按钮时将所选文本加粗。