contenteditable属性

📅 发布时间:2026/7/4 5:29:32 👁️ 浏览次数:
contenteditable属性
参考文档https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Global_attributes/contenteditable定义contenteditable是一个全局枚举属性用来决定html标签内部的内容是否可以编辑p contenteditabletrueEdit this content to add your own quote/p属性值true或空字符串表示元素是可编辑的。没有设置该属性值的时候被视为空字符串。false表示元素不是可编辑的。plaintext-only表示元素的原始文本是可编辑的但富文本格式会被禁用。如果没给出该属性或设置了无效的属性值则其默认值继承自父元素即如果父元素可编辑该子元素也可编辑。caret扩展caret-colorcss属性caret-color属性用来定义插入光标(caret)的颜色。就是当前文本获取焦点之后的那个小竖线。p { caret-color:skyBlue }caret-animation:光标动画这个属性比较新不是所有的浏览器都支持用来控制光标的闪烁动画。/* Keyword values */ caret-animation: auto; //指定文本光标闪烁显示 caret-animation: manual;//指定文本光标不闪烁显示 /* Global values */ caret-animation: inherit; caret-animation: initial; caret-animation: revert; caret-animation: revert-layer; caret-animation: unset;目前我用的腾讯文档的类似就是p { caret-color:blue caret-animation: auto; }也可以自定义光标动画keyframes custom-caret-animation { from { caret-color: transparent; } to { caret-color: darkblue; } } p { animation: custom-caret-animation infinite linear alternate 0.75s; caret-color: darkblue; caret-animation: manual; }补充一下动画属性animation: custom-caret-animation infinite linear alternate 0.75s;相当于animation-name: 使用名为custom-caret-animation的关键帧动画animation-duration:0.75s- 每次动画循环持续 0.75 秒animation-timing-function:linear- 动画速度均匀匀速animation-iteration-count:infinite- 无限循环播放animation-direction:alternate- 动画交替反向播放去时正向回时反向