contenteditable属性介绍，使用contenteditable实现文本域输入框功能

JOKER BUGGY

已于 2025-03-04 16:15:42 修改

阅读量1.5k

点赞数 6

文章标签： vue.js javascript 前端

于 2025-03-04 16:14:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48644617/article/details/146011293

版权

contenteditable 是 HTML 的一个全局属性，它允许用户直接在网页上编辑元素的内容，就像在文本编辑器中一样。下面从基本概念、使用方法、属性值、浏览器兼容性、使用场景、注项和应用示例几个方面详细介绍。

基本概念

contenteditable 属性可以应用于任何 HTML 元素，当一个元素设置了该属性后，用户可以通过鼠标点击或键盘操作来修改元素内的文本内容。这种特性使得网页的内容编辑更加灵活，无需额外的复杂表单或富文本编辑器插件。

使用方法

只需在 HTML 元素中添加 contenteditable 属性即可开启元素的可编辑状态。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contenteditable Example</title>
</head>
<body>
    <p contenteditable>这是一个可编辑的段落。</p>
</body>
</html>

在上述代码中，<p> 元素由于设置了 contenteditable 属性，其内容可以被用户直接编辑。

属性值

contenteditable 属性有三种可能的值：
true 或空字符串：表示元素是可编辑的。例如：

<div contenteditable="true">可编辑的 div 元素</div>
<div contenteditable>同样可编辑的 div 元素</div>

false：表示元素不可编辑。即使该元素的父元素是可编辑的，设置了 contenteditable="false" 的元素也不能被编辑。示例如下：

<div contenteditable>
    <p>这个段落所在的 div 是可编辑的。</p>
    <p contenteditable="false">但这个段落不可编辑。</p>
</div>

inherit：表示元素是否可编辑取决于其父元素的 contenteditable 属性值。不过，目前并不是所有浏览器都支持该值。

浏览器兼容性

contenteditable 属性得到了大多数现代浏览器的良好支持，包括 Chrome、Firefox、Safari、Edge 等。但在一些旧版本的浏览器中，可能存在兼容性问题。在使用时，建议进行充分的测试。

使用场景

富文本编辑器：可以基于 contenteditable 属性开发简单的富文本编辑器，用户可以直接在网页上编辑文本内容，设置字体样式、插入图片等。
在线文档编辑：在在线文档系统中，允许用户直接在网页上编辑文档内容，提供类似本地文档编辑器的体验。
实时内容更新：在一些需要用户实时更新内容的场景中，如论坛帖子的编辑、博客文章的撰写等，contenteditable 属性可以提供便捷的编辑方式。

注意事项

安全问题：由于用户可以输入任意内容，需要对输入内容进行严格的过滤和验证，以防止跨站脚本攻击（XSS）等安全问题。
样式和交互：可编辑元素的样式和交互可能与普通元素有所不同，需要通过 CSS 和 JavaScript 进行适当的调整，以提供良好的用户体验。
数据保存：当用户编辑完内容后，需要通过 JavaScript 将修改后的数据保存到服务器或本地存储中。

应用示例

需求：实现一个文本域输入框，如下图前面红色框内的文本是固定内容不能让删除和修改。后面绿色框的内容可以随便修改。

要实现这种效果，input输入框和文本域输入框无法达到这个目的，可以使用contenteditable属性来实现。

完整代码如下（Vue3）：

<template>
    <el-form>
        <el-form-item label="中文内容" class="row" required>
            <div class="my-text-area" @click="clickTextArea">
                <span>{{ state.form.content_cn_start }}</span>
                <span :contenteditable="true" class="my-text-area-input" ref="zhoInput" @click.stop @input="handleZhoInput">{{state.form.content_cn}}
                </span>
            </div>
        </el-form-item>
    </el-form>
</template>
<script setup>
import {reactive, ref} from "vue"

const zhoInput = ref()
const state = reactive({
    form:{
        content_cn_start:'固定开头内容，',
        content_cn:'',
    }
})

//数据双向绑定
const handleZhoInput = (event) => {
  state.form.content_cn = event.target.innerHTML;
}

//获取焦点
const clickTextArea = () => {
    zhoInput.value.focus()
}
</script>

<style lang="scss" scoped>
.my-text-area {
  padding: 5px 11px;
  border: 1px solid #c0c4cc;
  color: #606266;
  width: 100%;
  min-height: 150px;
  resize: vertical;
  overflow: auto;
  .my-text-area-input {
    outline: none;
    line-height: 1.5;
    -webkit-user-modify: read-write-plaintext-only;
  }
}
</style>

注意：

1、 contenteditable属性设置到行内元素（或设置css属性display：inline；）上才能达到上面示例的布局效果，即红色框和绿色框内容对齐，换行也可自动补齐，跟文本域输入框的文本看起来一样。

2、设置contenteditable属性后，如果按了回车键（enter）进行换行，会在换行时生成div标签，如果只想生成纯文本，就设置css属性 -webkit-user-modify: read-write-plaintext-only;