`
liuheng0429
  • 浏览: 4298 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

开启Html编辑模式的contentEditable属性

 
阅读更多
开启Html编辑模式的contentEditable属性
摘自网络:
http://www.2cto.com/kf/201303/194842.html

     Html中的contentEditable的属性可以打开某些元素的可编辑状态.也许你没用过contentEditable属性.甚至从未听说过.contentEditable的作用相当神奇.可以让div或整个网页,以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea  使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容.
    如果想要整个网页可编辑,请在body标签内设置contentEditable
    contentEditable已在html5标准中得到有效的支持。
    在IE8下设置表格可写不支持,其他元素没有问题。在FireFox运行一切正常。谷歌浏览器运行一切正常
    使用方法
    html中 <p contentEditable=“true”>;
    js 中 document.all("txt").contentEditable =true;
    应用
    前段UI的美化,表单元素通过css样式不一定能达成设计师的要求,通过开启 div p span等元素的contentEditable,来实现表单元素的功能(需要js搭配)。
    举例:
    用于在textarea中除ie外不能插入图片。
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script>
    function img(){
    var location1 = prompt("请输入图片的地址:","http://");
    if(location1){
    selImg(location1);
    }
    }
    function selImg(s){
    if(!s){return false;}
    var h=s.substr(s.lastIndexOf(".")+1,3);
    if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){
    Edit=document.getElementById("idEdit")
    Edit.innerHTML+='<img src='+s+'>'
    }
    else{
    }
    }
    </script>
    <div NAME=EditCtrl id=idEdit contentEditable=true style="width:100%;height:200px;border:1px solid #666666"> <b>hubro</b>
    </div>
    <input type="button" name="Submit" value="插入图片" onclick="img()">
    
    编辑本段HTML5中的解释与规定
    contenteditable是一个枚举类型的属性,可供选择的值有 空字符串、 true、false 或 inherit(默认)。
    当为空字符串时,效果和true一致。
    当一个元素的contenteditable状态为ture(contenteditable属性为空字符串,或为true,或为inherit且其父元素状态为true)时,意味着该元素是可编辑的。
    否则,该元素不可编辑。[1]
    注意:HTML5与HTML4的不同,对于contentEditable HTML5是趋于xhtml,使用的是全小写contenteditable,而HTML4 使用的是contentEditable

分享到:
评论

相关推荐

    DIV可编辑模式在光标位置插入内容

    标题中的“DIV可编辑模式在光标位置插入内容”指的是在HTML中,使用`contenteditable`属性将一个`&lt;div&gt;`元素设置为可编辑区域,允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...

    纯js和html可编辑的table(表格)

    // 开启编辑模式 }); }); ``` 2. **内容编辑**:通过`contentEditable`属性,我们可以使HTML元素变为可编辑状态。在上述示例中,当用户点击单元格时,该单元格的`contentEditable`属性被设置为`true`,允许用户...

    HTML5(软件品牌)-1期 06 教学课件_单元1_HTML5新增的属性.pdf

    2. **contentEditable属性**:此属性使元素的内容变得可编辑。如果`contenteditable`属性设置为`true`,用户可以在浏览器中直接编辑元素内的内容;若设置为`false`,则元素变为不可编辑;如果设置为`inherit`,则会...

    Paste_ContentEditable_DIV

    1. **Contenteditable属性**:理解HTML元素上的contenteditable属性如何工作,如何开启和关闭编辑模式。 2. **DOM操作**:使用JavaScript操作DOM,例如获取或设置contenteditable元素的内容,插入或删除文本。 3. **...

    HTML样式属性明细.pdf

    HTML5全局属性中,`contenteditable`允许用户直接在浏览器中编辑元素内容,`designMode`则可以开启整个页面的编辑模式。`hidden`属性可以隐藏元素,`spellcheck`控制输入字段的拼写检查,`tabindex`定义元素的键盘...

    用js制作的可编辑表格

    在JavaScript中,当用户双击表格的某个单元格时,我们可以触发编辑模式。这可以通过检查`event`对象的`type`属性来实现,如果`type`为`dblclick`,则表示用户进行了双击操作。接下来,我们将该单元格的`...

    网页ps代码

    `contentEditable`属性是HTML元素的一个属性,用于控制该元素及其子元素是否可以被用户编辑。当设置为`true`时,用户可以直接在页面上编辑文本;设置为`false`时,则关闭编辑功能。 - **应用场景**:这种功能常用于...

    让你看到的每个jsp页面都可以像word文档一样

    1. HTML5的`contentEditable`属性:用于创建可编辑区域,允许用户在浏览器中直接编辑内容。 2. JavaScript DOM操作:通过JavaScript访问和修改HTML元素,包括设置`contentEditable`属性和`designMode`。 3. JSP基础...

    让你的网站可编辑的实现js代码

    这段代码将`contentEditable`属性重新设置为`false`,从而关闭可编辑模式,恢复网页到正常状态。 #### 三、应用场景 这种技术在多种场景下都非常有用,例如: - **前端开发测试**:允许开发者快速测试布局更改和...

    神奇代码复制不能复制的网页内容.pdf

    1. 使用JavaScript的contentEditable属性 文档中提到了JavaScript代码`document.body.contentEditable='true';`,这表示页面的body部分将变为可编辑。`contentEditable`是HTML5中引入的一个属性,允许用户编辑页面上...

    直接修改某网页[代码文本]

    - **`designMode`属性:** `document.designMode`属性同样可以开启文档的编辑模式。当其值被设为`on`时,整个文档将变得可编辑。 #### 实际操作步骤: 1. 打开任意一个支持JavaScript执行的浏览器(如Chrome或Fire...

    在线编辑器的实现原理(兼容IE和FireFox)

    在IE5.5及之后的版本中,引入了“编辑模式”(designMode)这一概念,这使得在浏览器内部可以开启一个区域进行编辑。而在Firefox中,虽然没有直接的designMode属性,但通过设置`contentEditable`属性为`true`,也能...

    设计模式「Design Mode」-crx插件

    设计模式是一个很小的扩展程序,它使Chrome进入编辑模式,使您可以像在HTML编辑器中一样编辑整个页面。 此扩展非常适合用于快速测试概念,例如,当标题达到特定文本长度时页面布局是否中断,或者图像或按钮在页面的...

    在IE上直接编辑网页内容的js代码(IE地址栏js)

    这段代码的作用是将当前页面设置为可编辑模式,使得用户可以直接修改网页上的文本内容。具体步骤如下: 1. 打开需要编辑的网页。 2. 将上述JavaScript代码复制到IE浏览器的地址栏中,并按回车键执行。 3. 此时页面...

    CSS3.zip_html 参考手册

    - `contenteditable`属性使元素内容可编辑。 - `data-*`自定义属性存储额外数据。 这个CSS3参考手册包含了以上所有内容的详细解释和实例,对于前端开发者来说,是一份非常实用的学习资源。结合HTML5、JavaScript...

    edit-anything

    在这个扩展中,JavaScript代码被用来检测用户何时需要开启或关闭`contentEditable`功能,并相应地修改目标元素的属性。这通常涉及到DOM(文档对象模型)操作,包括查找特定的HTML元素,以及改变它们的属性值。 扩展...

    带自动生成的php表白程序 v1.0

    love.php生成的页面以此文件为模版程序运行原理给页面文字添加span标签,设置id="text-xx"唯一属性,使用contenteditable="true",开启该元素的编辑模式,用jQuery属性.click()判断点击,用.text()返回此元素的文本...

    Web时代变迁及html5与html4的区别

    HTML5还引入了新的全局属性,如contentEditable允许元素内容可编辑,designMode用于开启整个文档的编辑模式,hidden用于隐藏元素,spellcheck用于启用或禁用拼写检查,tabindex则控制元素的焦点顺序。此外,文件类型...

    php表白程序

    给页面文字添加span标签,设置id="text-xx"唯一属性,使用contenteditable="true",开启该元素的编辑模式,用jQuery属性.click()判断点击,用.text()返回此元素的文本内容,并用正则进行判断内容是否合法,然后通过...

Global site tag (gtag.js) - Google Analytics