contenteditable 属性

定义和用法

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 属性

时间: 2024-11-25 17:53:45

contenteditable 属性的相关文章

HTML5 contenteditable属性

HTML5 contenteditable属性: 此属性指定元素内容是否可编辑. 当元素中没有设置contenteditable属性时,元素将从父元素继承. 语法结构: <element contenteditable="true|false"> 浏览器支持: (1).IE浏览器支持此属性. (2).谷歌浏览器支持此属性. (3).火狐浏览器支持此属性. (4).Safari浏览器支持此属性. (5).Opera浏览器支持此属性. HTML4.01与HTML5之间的差异:

HTML5新增的通用属性 - contentEditable属性

HTML5为大部分HTML元素增加了contentEditable属性,如果将该属性设置为true,则浏览器允许开发者直接编辑该HTML元素里的内容,并且支持"可继承"的特点,也就是如果一个HTML元素的父元素是可编辑的,那么它也是可编辑的. 示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>contentEditable属性

HTML5之contenteditable属性

1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)contenteditable属性为false <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>contentEditable</title> </head> <ul contenteditable="

HTML5它contenteditable属性

1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)contenteditable属性为false <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>contentEditable</title> </head> <ul contenteditable="

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

所有主流浏览器都支持 contenteditable 属性 定义和用法 contenteditable 属性指定元素内容是否可编辑. 注意: 当元素中没有设置 contenteditable 属性时,元素将从父元素继承. contenteditable 属性是 HTML 新增的. true:可编辑 false:不可编辑 或者 带contenteditable的,可编辑 不带contenteditable的,不可编辑 <!DOCTYPE html> <html> <body&g

【HTML&amp;CSS】【4】contenteditable属性

<p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> 用途:使非表单标签得内容可以编辑 true 规定可以编辑元素内容. false 规定无法编辑元素内容. classname 继承父元素的 contenteditable 属性. 原文地址:https://www.cnblogs.com/huashengweilong/p/10807390.html

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

最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整的DEMO代码,不用急,先去理解,才能做出更加好的输入体验. 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以

HTML 5 全局 contenteditable 属性

contenteditable 可以将标签设置为可输入的input,textarea, 但是在ios上,点击或者点击很久input输入框才出来,兼容ios的方法是加一个   -webkit-user-select:text   样式: 然后加一个样式needsclick: <div class="textarea needsclick" contenteditable="true" style="-webkit-user-select:text&qu

h5新属性,可编辑的段落 contenteditable=“true”

HTML 5 全局 contenteditable 属性 HTML 5 全局属性 实例 一段可编辑的段落: <p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> 亲自试一试 定义和用法 contenteditable 属性规定是否可编辑元素的内容. HTML 4.01 与 HTML 5 之间的差异 contenteditable 属性是 HTML5 中的新属性. 语法 <element contentedit