contentEditable属性设置是否可编辑元素的内容

最新推荐文章于 2022-12-28 14:03:10 发布

转载最新推荐文章于 2022-12-28 14:03:10 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/linJie1930906722/p/5707754.html

本文介绍了HTML5中新增的contentEditable属性，该属性允许页面元素变为可编辑状态。通过设置contenteditable=true，可以使div、p等标签内内容支持直接编辑。

在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑：

设置contenteditable="true"标签内的元素(内容)可以编辑

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 
 5 <div contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</div>
 6 <p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
 7 
 8 <ul>
 9     <li contenteditable="true">
10         <p >这是一段可编辑的段落。请试着编辑该文本。</p>
11     </li>
12 </ul>
13 
14 </body>
15 </html>

如果不设置contenteditable的值默认为false，不可以编辑的元素。

更详细介绍：http://www.w3school.com.cn/html5/att_global_contenteditable.asp

测试地址地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_global_contenteditable

转载于:https://www.cnblogs.com/linJie1930906722/p/5707754.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34179968

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作

codingWeb的博客

11-07

9506

这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素

苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑

chelen_jak的专栏

11-16

1340

原文出处：https://www.cnblogs.com/xiangsj/p/6084844.html 问题：在苹果手机IOS中 contenteditable="true" 做文本域输入，点击可以弹出键盘但是无法输入，安卓都正常。经测试后，记得加一个样式 -webkit-user-select:text 就可以了。 ...

参与评论您还未登录，请先登录后发表或查看评论

vue 中修改contenteditable=“true” 属性， vue中给dom 元素添加 contenteditable属性

web全栈开发的博客

11-30

1950

找到需要添加或修改的元素的类 <div class="w-e-text"></div> var edit=document.getElementsByClassName('w-e-text')[0] edit.setAttribute('contenteditable','false'); 即可修改完成扫码获取 1000+条前端面试题收藏以后面试用得上 ...

html全局属性contenteditable

BINGXIHEART的博客

12-28

280

html全局属性

设置contenteditable属性可编辑HTML标签的内容(可代替textarea)

09-28

以往我们想要实现可编辑的文本区域，通常会使用textarea元素，但在某些场景下，使用div配合contenteditable属性或许会更加灵活和强大。属性的使用非常简单，只需要在HTML元素上添加contenteditable="true"，这个...

contenteditable元素的placeholder输入提示语设置方法

09-24

这个属性可以被赋予任何一个HTML元素，使其变成可编辑状态。通过这种方式，可以创建类似于文本编辑器的富文本编辑器，而无需复杂的JavaScript或第三方库。然而，在使用contenteditable元素时，常常需要提供一些输入...

使用contenteditable属性实现页面可编辑功能

通过设置HTML元素的`contenteditable`属性，可以使页面上的元素成为可编辑状态。这是HTML5新增的一个属性，它允许开发者直接将网页中的某些区域设置为可编辑，从而为用户提供类似于文本编辑器的编辑体验。`...

基于HTML5 contenteditable属性开发的富文本编辑器，PC端版本.zip

最新发布

02-14

`contenteditable`属性可以添加到任何HTML元素上，如`<div>`、`<p>`或`<span>`等，使得该元素变得可编辑。一旦设置了`contenteditable="true"`，用户就可以在浏览器中直接输入、删除、格式化文本，类似于Word或...

html5 contenteditable 可编辑属性

CJXBShowZhouyujuan的博客

08-31

8010

今天在工作中遇到了这样的需求。如上gif显示。于是就仔细的看下了 h5新增的这个可编辑属性 contenteditable contenteditable 属性规定是否可编辑元素的内容。contenteditable 可以设置为true/false ul{ margin: 0; padding: 0; } ul li{ display:

contenteditable属性

最有趣的编程

11-17

788

contenteditable属性允许用户在线编辑元素的内容： contenteditable属性 可编辑列表列表元素1 列表元素2 列表元素3

html5新属性contenteditable 对于那些不可编辑的标签，现在都可以编辑了

weixin_30632883的博客

05-10

1232

contenteditable = true 表示该html标签的内容可以编辑，对于那些不可编辑的标签，现在都可以编辑了。转载于:https://www.cnblogs.com/jerrypro/p/6834551.html

在可编辑的（contentEditable="true"）的DIV中动态设置文本属性

weixin_34348805的博客

03-19

693

<HTML><HEAD><TITLE>DemoforDIVeditor</TITLE></HEAD><BODY><SCRIPTLANGUAGE="JavaScript"><!--functionExec(sCmd){...

HTML5-contentEditable属性规定是否可编辑元素的内容

weixin_34133829的博客

11-06

661

contentEditable='true' :可以编辑 contentEditable='false' :不可以编辑转载于:https://www.cnblogs.com/liuqingxia/p/9918012.html

Linux火狐不能编辑,火狐浏览器下 contenteditable 内包含不可编辑元素，光标不能出现在元素后面...

weixin_34794420的博客

05-14

946

火狐浏览器下.edit {width: 200px;height: 40px;border: 1px solid green;}.disEdit {display: inline-block;width: 50px;height: 24px;}123 问题原因：不可编辑元素无法获取光标，并且不可编辑元素又在最后。解决办法：如果不可编辑元素在最后，那么在不可编辑元素后面加一个不显示内容的文本节点即...

html div 不可编辑状态,HTML contenteditable属性

weixin_36115475的博客

06-01

3323

前言之前一直没有留意到有contenteditable这个属性，今天突然看到特意记录一下它的用法和实际用途；用法为了某个使元素可编辑，你所要做的就是在html标签上设置"contenteditable"属性，它几乎支持所有的HTML元素。contenteditable有以下几种属性："true" 表明该元素可编辑"false" 表明该元素不可编辑"inherit" (默认)表明该元素继承了...