首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使contenteditable="true“div具有有效和无效状态

使contenteditable="true"的div具有有效和无效状态是通过JavaScript来实现的。以下是一个示例代码:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
    <title>Content Editable Div</title>
    <style>
        .valid {
            border: 2px solid green;
        }
        .invalid {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div id="editableDiv" contenteditable="true" oninput="checkValidity()">
        This is an editable div.
    </div>

    <script>
        function checkValidity() {
            var div = document.getElementById("editableDiv");
            var content = div.innerText.trim();

            if (content.length > 0) {
                div.classList.remove("invalid");
                div.classList.add("valid");
            } else {
                div.classList.remove("valid");
                div.classList.add("invalid");
            }
        }
    </script>
</body>
</html>

上述代码中,我们创建了一个具有contenteditable属性的div,并添加了一个oninput事件监听器来检查其有效性。当div中的文本内容不为空时,我们将其样式设置为有效状态(绿色边框),否则设置为无效状态(红色边框)。

这种实现方式可以用于各种场景,例如表单验证、富文本编辑器等。腾讯云提供了多种云计算产品,如云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。具体产品介绍和相关链接地址可以在腾讯云官方网站上查找。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • user-modify跟style标签可真是天生一对?

    [5531211-b71cbd48561dd566.jpg] 前来挖墙脚的是html中的contenteditable,他是一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea...,不过还是存在许多不足跟问题,比如没有change钩子等,本文不作深入探讨❌ 开胃 使一个div可以进行内容编辑: 点击我进行编辑 [strip]...因此有如下代码: html { background-color: #f1f1f1; } </style...,想要在页面上编辑style元素,必须要满足以下两点: style元素必须放在body元素内 style元素要设置display: block; 于是代码变成了这样: <style contenteditable...read-write write-only read-write-plaintext-only CSS user-modify属性行为表现测试实例页面 我们取第四个值就行,定义内容只可输入纯文本,因此回车也就不会产生div

    57340

    contenteditable跟style标签可真是天生一对

    contenteditable是html的一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在许多不足跟问题,比如没有change钩子等,本文不作深入探讨❌...01 开胃 使一个div可以进行内容编辑: 点击我进行编辑 ?...因此有如下代码: html { background-color: #f1f1f1; } </style...,想要在页面上编辑style元素,必须要满足以下两点: style元素必须放在body元素内 style元素要设置display: block; 于是代码变成了这样: <style contenteditable...缺点 存在的缺点很明显,我也很刻意的去避开,那就是代码无法换行,因为回车后,内容会新增div元素,破坏了原有的文本结构: ? ?

    1.7K21
    领券