HTML编辑与校验属性-优快云博客

1、contentEditable--在使用这个属性下的子元素为可编辑。属性是true/false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>contentEditable属性示例</title>
</head>
<body>
    <h2>可编辑列表</h2>
    <ul contentEditable="true">
        <li>列表元素1</li>
        <li>列表元素2</li>
        <li>列表元素3</li>
    </ul>
</body>
</html>

2、designMode--整个可见页面（body）下的所有元素都可编辑，注意：该属性这能在JavaScript中使用属性值：on/off

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>designMode属性示例</title>
</head>
<body>
    <h2>可编辑</h2>
    <ul>
        <li>可编辑</li>
        <li>可编辑</li>
        <li>可编辑</li>
    </ul>
    <script>
         document.designMode = "on";
    </script>
</body>
</html>

3、spellcheck 只针对 textarea和input，它的功能对用户输入的文本内容进行拼写和语法检查。注意如果元素本身的readOnly或disabled为true，那么就不执行拼写检查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>spellcheck</title>
</head>
<body>
    <!-- spellcheck 只针对 textarea和input，
         它的功能对用户输入的文本内容进行拼写和语法检查。
         注意如果元素本身的readOnly或disabled为true，
         那么就不执行拼写检查 -->
    <textarea spellcheck="true"></textarea>
    <input type="text" spellcheck="false">
</body>
</html>