开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

<!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中的文本内容不为空时，我们将其样式设置为有效状态（绿色边框），否则设置为无效状态（红色边框）。

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

相关搜索:Angular2和Node :印前检查的响应具有无效的HTTP状态代码403 为使onclick功能处于非活动状态的Div元素样式"Top“创建最大值和最小值使div下拉导航栏元素与超链接导航栏元素具有相同的大小和位置使会话和request.getsession无效后，JSession ID保持不变(True)使页面具有div、图像和视频响应性在Angular Js1和Webapi 2上，印前检查的响应具有无效的HTTP状态代码405 在使用具有属性role = textbox和contenteditable=true .Then复制粘贴文本的跨度时，无法正常工作如何使div弹出，父div具有溢出隐藏和绝对位置如何使父div和子div具有相同的响应高度如何使用display: inline-block创建并排包含文本和图像的div并使它们具有响应性

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【富文本】268- 富文本原理了解一下？

contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样：那么在这个...如果想要插入的子节点不可编辑，我们只需要把子节点的属性设置为 contenteditable="false" 即可，就像这样：这是可编辑的...--编辑区--> ...所以我们需要具有控制光标的能力，具体操作就是在点击按钮之前我们可以先存储当前光标的状态，执行完命令或者在需要的时候后再还原或设置光标的状态即可。

1.9K4 0

富文本编辑器开发简介

设置designMode属性，使空白页面HTML的body可以被编辑。 designMode：off/on * 页面加载完才可以设置designMode属性，所以需要使用onload事件。...contenteditable='true'设置元素和它包含的元素可以编辑。...* 区分contenteditable和contentEditable。contenteditable是元素的特性，而contentEditable是对象的属性。...= true;} btn2.onclick = function(){box.contentEditable = false;} 命令 document.execCommand...> js $(document

4.1K2 0

【Web技术】421- 富文本原理介绍

contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样：那么在这个...如果想要插入的子节点不可编辑，我们只需要把子节点的属性设置为 contenteditable="false" 即可，就像这样：这是可编辑的...--编辑区--> <div class="content...所以我们需要具有控制光标的能力，具体操作就是在点击按钮之前我们可以先存储当前光标的状态，执行完命令或者在需要的时候后再还原或设置光标的状态即可。

1K2 0

【前端】HTML属性

以及 accesskey 规定激活（使元素获得焦点）元素的便捷按键例通过Alt + F (或者 Shift + Alt + F)打开指定链接(mac：Control...title title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。...规定元素内容是否可编辑，true、false 如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。...例 hidden 元素隐藏例这个段落应该被隐藏。...spellcheck 规定是否对元素进行拼写和语法检查例这是一个段落。

3K1 0

11 个 CSS 知识搭配 11 个 JS 特性（实用合集）

页面可编辑：contentEditable 定义：这个 API 可以使页面所有元素成为可编辑状态，使浏览器变成你的编辑器。...该文本输入框默认状态下有默认文本提示信息文本框输入状态下其高度会随文本内容自动撑开像这样的需求我们就可以使用代替 <textarea...不过 contentEditable='true' 是不会有 placeholder 的，那 placeholder 怎么办呢？...我一般会使用如下方案，输入内容后改变 class： // css...浏览器活跃窗口监听: window.onblur & window.onfocus 定义：这两个 api 分别表示窗口失去焦点和窗口处于活跃状态。

8783 0

跨站脚本（XSS）备忘录-2019版

IE、Safari) drag me...（Chrome、Firefox、IE、Safari) drag metest MathML使任何标签都可点击 blah 按钮和动作 <button...ready && (ready = true) && ( !call ?...多语言有效载荷1 javascript:/*--><svg/onload='+/"/+/onmouseover=1/

6.2K1 0

2016.07 第3周群问题分享

而用div来模拟时，首先遇到的问题是：div怎么实现输入功能？ contenteditable 属性规定是否可编辑元素的内容。...可能我们还是第一次见到这个属性contenteditable，如一个普通的元素上加上contenteditable="true"就实现可编辑状态，就出现光标了。...如效果： ? contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。...HTML代码 CSS代码 .wrap { width: 400px; min-height...localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等 JS数组去重 2016.07.18~2016.07.22 核心内容

9258 0

可输入文字的div标签

然而，并不只有两个，div，p还有其他很多标签其实都可以。...代码： /**css样式*/ .input{...解释 contentEditable 属性用于设置或返回元素的内容是否可编辑。当我们在标签里面加入了contentEditable属性，这个标签就会变为可编辑状态。...扩展切换元素的编辑状态： var x = document.getElementById("myP"); if (x.contentEditable == "true") { x.contentEditable...; } else { x.contentEditable = "true"; button.innerHTML = "p 元素内容不可编辑!"; }

2.2K1 0

【前端词典】分享 8 个有趣且实用的 API

页面可编辑：contentEditable 定义：这个 API 可以使页面所有元素成为可编辑状态，使浏览器变成你的编辑器。...该文本输入框默认状态下有默认文本提示信息文本框输入状态下其高度会随文本内容自动撑开像这样的需求我们就可以使用代替 <textarea...不过 contentEditable='true' 是不会有 placeholder 的，那 placeholder 怎么办呢？...我一般会使用如下方案，输入内容后改变 class： // css...浏览器活跃窗口监听: window.onblur & window.onfocus 定义：这两个 api 分别表示窗口失去焦点和窗口处于活跃状态。

7593 0

三种插件开发模式，带你玩废tinymce

注册后，将创建一个具有相同侧边栏名称的新工具栏切换按钮。此外，还有一个 ToggleSidebar 命令和一个“ToggleSidebar”事件，可用于管理侧边栏的打开/关闭状态。...可以在配置中设置切换按钮状态。...HTML templates（HTML 模板）：和元素使您可以编写不在呈现页面中显示的标记模板，类似比 Vue 的模板语法。...setAttribute("contenteditable", true); } self.removeChild = () => { console.log("five"); };..."); let oldSelectDom = dom.querySelector( "div.tp-code_main[contenteditable=true]"

4.8K3 0

input框取消光标颜色手机端不生效

文字颜色可以使用text-shadow属性 input{ color:transparent; text-shadow:0 0 0 red; } PC端没问题，但是手机端测试无效...参考链接：http://blog.csdn.net/u010730897/article/details/72721960 这里我用div模拟一个： div.box{ position...2px solid #e74c3c; position:absolute; top:0; left:0; } <input type="text" name="aaa" id="aaa" class="class3" oninput...PC端没问题，但是手机端依然测试无效。还可与使用一个方法：给div或者p加 contenteditable="true" 属性然后获取他的值就好了但是原理跟input的基本一样

1.4K6 0

HTML5全局属性汇总

局部属性和全局属性局部属性：有些元素能规定自己的属性，这种属性称为局部属性。...比如 link 元素，它具有的局部属性有 href、 rel、 hreflang、 media、 type、 sizes 这六个。 ...-- contenteditable属性应用 --> 设置为 true 是可编辑的如上例，p 元素的 contenteditable...-- hidden属性应用 --> 这个元素将会被隐藏 9、lang 属性 lang 属性用于说明元素内容使用的语言。...spellcheck 属性可以接受的值有两个：true 和 false。至于拼写检查的实现方式则因浏览器而异。 <!

9930 0

h5作品介绍_editable联动

我是一个div 那么会出现一个神奇的效果。(文字可以编辑) 语法也很简单。...contenteditable=”true” （可以编辑） contenteditable=”false” （不可以编辑）如果是嵌套关系的呢？... 我是一个div1 我是div2,没有contenteditable属性你会发现，即使是嵌套关系...如果子级不想编辑，给子级添加上contenteditable=“false” 即可最后说一下，下面这种特殊情况，按理来说，span 的姓名和年龄都是不可以编辑的对吧。... 姓名：小明 <span contenteditable

2662 0

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

5654 0

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

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

1.6K2 1

这些Web API真的有用吗？别问，问就是有用

state（网络状态） battery state（电池状态） vibration（设备震动） page visibility（页面可见性） deviceOrientation（陀螺仪） toDataUrl...hidden>我被隐藏了 document.querySelector("div").hidden = true / false; - contenteditable 可以使一个元素可以被用户编辑...：我是P元素，但是我也可以被编辑效果如下：如果这个属性跟style标签相遇会产生一段非常奇妙的故事：contenteditable跟style标签可真是天生一对...-- 默认就是true，可省略 --> 效果如下：设置不检查： document.querySelector("div").contains(document.querySelector("p")); // true - online

1.2K3 1

你可能不知道的 21 个 Web API

state（网络状态） battery state（电池状态） vibration（设备震动） page visibility（页面可见性） deviceOrientation（陀螺仪） toDataUrl...hidden>我被隐藏了 document.querySelector("div").hidden = true / false; - contenteditable 可以使一个元素可以被用户编辑...：我是P元素，但是我也可以被编辑效果如下：如果这个属性跟style标签相遇会产生一段非常奇妙的故事：contenteditable跟style标签可真是天生一对...-- 默认就是true，可省略 --> 效果如下：设置不检查： document.querySelector("div").contains(document.querySelector("p")); // true - online

1.4K2 0

前端少为人知的知识–前端冷知识集锦（css篇）

如法炮制，利用left和transform同样可实现水平居中，不过意义不大，毕竟text-align和margin差不多满足需求了。...属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。...此技巧在IE下无效。拥有此技能者，逆天也！ body { color... ?

9662 0

分享 15 个 HTML 新特性，大多数人可能不知道，建议尽早使用上

SPA 框架的引入使 Web 开发发生了重大变化。更多繁重的工作转移到了前端，需要处理更多的事情，例如动态 UI、路由、状态管理等。因此，程序员习惯于使用新方法和第三方来减轻一些繁重的工作。...1、内容可编辑属性 contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。...您需要这样设置它。... Earth 616 superheroes 1....... 14、Time 标签标记定义特定时间（或日期时间）。

5713 0

HTML5笔记-（常用元素）

基本元素 :根元素，允许省略 :允许省略 :标题引入样式定义段落换行水平线换行与不换行的节文本格式化加粗斜体强调小上标下标超链接和锚点 _slef,_blank,_top,_parent（代表用本窗口，新窗口，顶级框架，父级框架打开） xxxa> media->指定href才有效，默认为...属性：true/false;可以将table,div等变为可编辑 designMode属性：on/off;全局的contentEditable属性 hidden属性：true/false 为input和...textarea增加了spellcheck属性：true/false。

6881 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭