• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • html5 内容可编辑

    版本:HTML5

    contenteditable 属性规定元素内容是否可编辑。它允许用户去改变元素中包含的任何文字,包括它的子对象。ontenteditable 属性是 HTML5 中的新属性。

    新的浏览器拥有一个可以应用于元素中的漂亮的新属性,这就是contenteditable。就像名字所表示的,它允许用户去改变元素中包含的任何文字,包括它的子对象。这个属性的用途很多,包括简单的to-do list应用。

    语法

    <element contenteditable="true|false">

    属性值

    描述
    true 规定元素可编辑。
    false 规定元素不可编辑。

    浏览器支持

    Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签的属性及方法。
    所有主流浏览器都支持 contenteditable 属性。

    实例

    <ul contenteditable="true"> 
    	<li> Break mechanical cab driver. </li> 
    	<li> Drive to abandoned factory  
    	<li> Watch video of self </li> 
    </ul> 
    

    效果如下

    • Break mechanical cab driver.
    • Drive to abandoned factory
    • Watch video of self


    <fieldset>
        <legend>编辑区</legend>
        <p style="min-height:100px;" contenteditable="true">这里的内容可以被编辑</p>
    </fieldset>
    

    效果如下

    编辑区

    这里的内容可以被编辑

    • contenteditable属性可以让元素的内容变成可以编辑的,也就是说,内容可以删除或者添加,并且可以将网页中其他元素的内容拖动到该元素中。
    • contenteditable的值可以是true、false或者空字符串,当值是空字符串时,与值true功效相同,表示元素的内容可以编辑。

    HTML代码:

    <ul contenteditable="true">
        <li>这里是第一行文字</li>
        <li>这里是第二行文字</li>
        <li>这里是第三行文字</li>
    </ul>
    

    效果如下

    • 这里是第一行文字
    • 这里是第二行文字
    • 这里是第三行文字

    上篇:html5 拖放

    下篇:html5 本地存储