定义和用法

contenteditable 属性规定是否可编辑元素的内容。

语法

<element contenteditable="value">

属性值

描述
true 规定可以编辑元素内容。
false 规定无法编辑元素内容。
classname 继承父元素的 contenteditable 属性。

支持IE系列和最新浏览器

实例:

/**宽度固定,自动换行,内容超出滚动条显示***/
.divOne {
width: 300px;
height: 200px;
border: 1px solid rgb(0,0,0);
margin: 20px;
overflow: hidden;
overflow-y: auto;
word-break: break-all;
word-wrap: break-word;
line-height: 20px;
background: none;
} .divOne p {
margin: 0px;
padding: 0px;
} .divOne:focus {
border: 1px solid red;
box-shadow: 0px 0px 30px rgba(0,255,0,0.5);
} /*宽度固定,高度自适应*/
.divTwo {
width: 300px;
height: auto;
border: 1px solid blue;
margin: 20px;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
line-height: 20px;
background: none;
}
    <div class="divOne" contenteditable="true">
</div> <div class="divTwo" contenteditable="true">
<input type="button" value="按钮" />
</div>

显示结果:

contenteditable 属性的更多相关文章

  1. HTML5它contenteditable属性

    HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)content ...

  2. HTML5之contenteditable属性

    HTML5之contenteditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)content ...

  3. 关于contenteditable属性

    今天刷刷看看,看到了发说说框,发现居然不是textarea的,百思不得其解围.后来看到contenteditable,心想应该就是这个搞怪的吧,百度了下.w3c的解释是contenteditable属 ...

  4. HTML contenteditable 属性

    contenteditable 属性是 HTML5 中的新属性,所有的主流浏览器都支持 contenteditable 属性. contenteditable 属性规定了元素内容是否可编辑. * 如果 ...

  5. html -- contenteditable 属性:指定元素内容是否可编辑

    所有主流浏览器都支持 contenteditable 属性 定义和用法 contenteditable 属性指定元素内容是否可编辑. 注意: 当元素中没有设置 contenteditable 属性时, ...

  6. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  7. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  8. contenteditable属性让div也可以当做输入框

    你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...

  9. html元素contenteditable属性如何定位光标和设置光标

    最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...

随机推荐

  1. css控制图片变灰色,彩色

    <A href="链接地址"><IMG src="p1.jpg" border="0"></A> < ...

  2. 菜鸟做HTML5小游戏 - 翻翻乐

    记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...

  3. 4月13日 php

    用php打印乘法表: <html> <head> <title>我的第一个PHP页面</title> </head> <body> ...

  4. Python学习笔记总结(二)函数和模块

    一.函数 函数的作用:可以计算出一个返回值,最大化代码重用,最小化代码冗余,流程的分解. 1.函数相关的语句和表达式 语句        例子 Calls        myfunc(‘diege', ...

  5. 摘录 javescript 常用函数

     

  6. IOS开发教程之put上传文件的服务器的配置及实例分享-备用

    感谢大神分享 1,HTTP常见的方法 GET 获取指定资源 POST 2M 向指定资源提交数据进行处理请求,在RESTful风格中用于新增资源 HEAD 获取指定资源头部信息PUT 替换指定资源(不支 ...

  7. MATLAB cell 数组介绍

    转载:http://www.matlabsky.com/forum.php?mod=viewthread&tid=21089 由于工作需要,经常要处理大量的实验数据.基本都是由仪器导出来,随着 ...

  8. cf B. Berland Bingo

    http://codeforces.com/contest/370/problem/B 题意:给你n个卡片,卡片上有m个不同的数字,这个游戏是随即的从袋子里面抽球,球上有数字1-100:如果第ith玩 ...

  9. cf C. Matrix

    http://codeforces.com/contest/365/problem/C 构造出的矩阵中的长方形的和等于构成它的长的那些数字的和加上构成它的宽的那些数字的和. 也就是求这个字符串中的两个 ...

  10. 中国IC业“芯”结:IC小国真能赶追韩美日么?

    集成电路是关系到国民经济和社会发展的战略性.基础性和先导性产业,是培育发展战略性新兴产业.推动信息化和工业化深度融合的核心与基础.因此,我 国历来就十分重视集成电路产业的培育和发展,在这方面投入了大量 ...