HTML contenteditable属性

jimhs 发布于2019-08-30 10:56 / 2563人阅读

摘要：前言之前一直没有留意到有这个属性，今天突然看到特意记录一下它的用法和实际用途用法为了某个使元素可编辑，你所要做的就是在标签上设置属性，它几乎支持所有的元素。

前言

之前一直没有留意到有contenteditable这个属性，今天突然看到特意记录一下它的用法和 实际用途 ；

用法

为了某个使元素可编辑，你所要做的就是在html标签上设置"contenteditable"属性，它几乎支持所有的HTML元素。

contenteditable有以下几种属性：

"true" 表明该元素可编辑

"false" 表明该元素不可编辑

"inherit" （默认）表明该元素继承了其父元素的可编辑状态


  This text can be edited by the user.

通过一下代码，可以观察到如果子元素没有设置contenteditable属性，其默认值继承自父元素（既默认为"inherit"属性）


  Edit this content to add your own quote
  Edit this content to add your own quote - 2

可以使用css中caret-color属性设置文本插入光标的颜色。

实际用途

1.div模拟textarea文本域轻松实现高度自适应
2.避免处理input、textarea的内含样式

CSS user-modify

使用css中的user-modify属性，也可以让普通元素可以读写。

/* Keyword values */
user-modify: read-only; (默认值)
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only; (只允许输入纯文本，但兼容性很差)

/* Global values */
user-modify: inherit;
user-modify: initial;
user-modify: unset;

举个例子：

The user is able to change this text.

.readwrite {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
}

相对于contenteditable而言，user-modify的兼容性就没那么理想了。

GPU云服务器云服务器 contenteditable html属性 html 数据属性 html 变形属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114663.html

HTML contenteditable属性

摘要：前言之前一直没有留意到有这个属性，今天突然看到特意记录一下它的用法和实际用途用法为了某个使元素可编辑，你所要做的就是在标签上设置属性，它几乎支持所有的元素。前言之前一直没有留意到有contenteditable这个属性，今天突然看到特意记录一下它的用法和实际用途；用法为了某个使元素可编辑，你所要做的就是在html标签上设置contenteditable属性，它几乎支持所...

huayeluoliuhen 2019-08-02 16:18 评论0 收藏0
基于React的可编辑在线简历模板

摘要：总结最后介绍一下整个页面的功能可以对每个字段进行编辑可以对列表字段随意添加移动删除可以直接使用的语法来插入链接可以上传本地头图可以保存为三种格式在线预览地址戳我仓库戳我，欢迎在线预览地址：戳我 GitHub仓库: 戳我，欢迎star 介绍技术栈为纯React。接下来介绍一些稍微重要的技术点： contentEditable 核心的编辑功能用到了HTML5的 contentEdi...

codecook 2019-08-22 15:20 评论0 收藏0
html元素contenteditable属性如何定位光标和设置光标

摘要：最近在山寨一款网页微信的产品，对于用属性做的编辑框有不少心得，希望可以帮到入坑的同学。在里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。，现在我们来实际操作光标了。最近在山寨一款网页微信的产品，对于div用contenteditable属性做的编辑框有不少心得，希望可以帮到入坑的同学。废话不多说了，我们先来理解一下HTML的光标对象是如何工作的，后面我会贴完整...

kyanag 2019-08-19 18:41 评论0 收藏0
10行 JavaScript 实现文本编辑器

摘要：但是，现在我只需要一个很基本的内容输入内容编辑的功能，如粗体斜体列表对齐等。的作用相当神奇，可以让或整个网页，以及等等元素设置为可编辑。现在，事情就很简单了，我们把要执行的命令放到属性中，然后编写简单的都可以很容易地完成编辑器功能了。背景我们平时用到的浏览器编辑器功能都会比较多，实现的代码逻辑也会非常复杂，往往是作为一个单独插件被引入进来的。但是，现在我只需要一个很基本的内容输入内...

laznrbfe 2019-08-20 14:31 评论0 收藏0