CSS user-modify属性行为表现测试实例页面

回到相关文章 »

代码:

CSS代码:
.test {
    height: 100px;
    padding: 5px;
    border: 1px solid #a0b3d6;
    overflow: auto;   
}
.test:focus {
    box-shadow: 0 0 5px blue;    
}
.read-only {
    -webkit-user-modify: read-only;
}
.read-write {
    -webkit-user-modify: read-write;;
}
.write-only {
    /* 几乎没有浏览器支持 */
    user-modify: write-only;
}
.read-write-plaintext-only {
    -webkit-user-modify: read-write-plaintext-only;
}
                
HTML代码:
<strong>read-only</strong>
<p class="test read-only"></p>
<strong>write-only</strong>
<p class="test write-only"></p>
<strong>read-write</strong>
<p class="test read-write"></p>
<strong>read-write-plaintext-only</strong>
<p class="test read-write-plaintext-only"></p>
                

效果(点击下面的框框):

read-only

write-only - 只有超级古老的FireFox浏览器才支持(1.7-)

read-write - 支持富文本

read-write-plaintext-only - 纯文本