• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • contenteditable

    版本:HTML5

    一个枚举属性(enumerated attribute),表示元素是否可被用户编辑。如果可以,浏览器会调整元素的部件(widget)以允许编辑。true 或者空字符串,表明元素是可被编辑的;false,表明元素不能被编辑。

    <blockquote contenteditable="true">
        <p>Edit this content to add your own quote</p>
    </blockquote>
    
    <cite contenteditable="true">-- Write your own name here</cite>
    <style>
    .output {
        font: 1rem 'Fira Sans', sans-serif;
    }
    
    blockquote {
        background: #eee;
        border-radius: 5px;
        margin: 16px 0;
    }
    
    blockquote p {
        padding: 15px;
    }
    
    cite {
        margin: 16px 32px;
    }
    
    blockquote p::before {
        content: '\201C';
    }
    
    blockquote p::after {
        content: '\201D';
    }
    
    [contenteditable='true'] {
        caret-color: red;
    }
    
    </style>
    

    Edit this content to add your own quote

    -- Write your own name here

    该属性必须是下面的值之一:

    • true或空字符串,表示元素是可编辑的;
    • false表示元素不是可编辑的。

    如果没有设置该属性,其默认值继承自父元素。

    该属性是一个枚举属性,而非布尔属性。这意味着必须显式设置其值为truefalse或空字符串中的一个,并且不允许简写为<label contenteditable>Example Label</label>正确的用法是<label contenteditable="true">Example Label</label>

    你可以使用CSScaret-color属性设置用于绘制文本插入caret的颜色。

    浏览器支持

    IE、火狐浏览器不支持,其余浏览器支持contenteditable属性

    上篇:class

    下篇:itemtype