使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中的文本内容不为空时，我们将其样式设置为有效状态（绿色边框），否则设置为无效状态（红色边框）。
这种实现方式可以用于各种场景，例如表单验证、富文本编辑器等。腾讯云提供了多种云计算产品，如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。具体产品介绍和相关链接地址可以在腾讯云官方网站上查找。
相关·内容
.Is属性在contentEditable =“true”的div上不起作用有没有办法让这个字段成为必填字段，这样div就会有一个有效和无效的状态？
浏览 58提问于2018-07-27得票数 5
回答已采纳
我在父contenteditable=“true”中使用嵌套的contenteditable="false“元素有非常不同的行为： <div contenteditable="true"> <p contenteditable="false&
浏览 3提问于2016-06-20得票数 3
回答已采纳
我们可以通过使用contentEditable="true"属性使HTML元素可编辑： This text can be edited</div>
我尝试过使用:active和:hover伪类(以及border: none)，但都没有效</
浏览 3提问于2015-02-01得票数 1
回答已采纳
我有一个div的输出内容，有时输出链接。但是当这个输出div将contentEditable属性设置为true时，if使链接不可点击。奇怪的是，您仍然可以悬停在它之上，在尝试单击它之前，它看起来和行为都像一个链接。(蓝色的颜色，下划线，悬停改变蓝色的颜色等等) Some content with
浏览 7提问于2015-04-16得票数 2
回答已采纳
我有以下代码： Blah blah <a href="http://google.com">Google</a> Blah blah
有没有办法让这个a在不移动锚点的情况下是可点击的，不可编辑的？
浏览 57提问于2012-08-22得票数 26
回答已采纳
如何使WinJS.UI.ListLayout contenteditable="true"中item中某一列的内容可编辑，但其余列表列对ListLayout的其他操作(如itemsReorderable="true" )保持活动状态<div class="person" data-win-bind="innerText: person" contenteditable=&
浏览 11提问于2018-08-24得票数 0
回答已采纳
我需要有条件地删除元素中的 contenteditable属性：<div contenteditable="true"></div>
<div></div>data() { contenteditable
浏览 9提问于2021-10-24得票数 0
回答已采纳
我已经创建了一个具有属性contenteditable=true的DIV，并使用属性contenteditable=false附加了像span和a这样的子元素。
浏览 0提问于2010-02-11得票数 6
回答已采纳
对于某些属性，有效果的是属性的存在--分配给它的值是不相关的。例如，自动焦点属性可以设置为“false”、“true”或“banana”，并且元素仍然会自动聚焦。IE，以下所有内容都是等价的，并使div获得焦点：<div autofocus=&quo
浏览 6提问于2012-08-16得票数 7
4回答
我有用户的信息和编辑按钮，以防任何用户想要编辑他/她的信息。
用户也可以通过双击来编辑其信息。假设有一个用户名，那么用户可以通过单击double对其进行编辑。如何使用文本框使值可编辑？
浏览 1提问于2013-08-06得票数 1
回答已采纳
2回答
有任何方法可以为具有contenteditable属性的元素启用双向绑定吗？或者至少支持@onchange事件？<textarea>@myValue</textarea>不起作用：<td contenteditable<
浏览 13提问于2022-09-02得票数 0
false) { } classToEdit[i].contentEditable = false ; }classToEdit是具有相同类名或任何classToEdit[i].contentEdit
浏览 0提问于2014-12-26得票数 1
回答已采纳
> table, th, td { } <div-- filled by script --> </table> &#
浏览 6提问于2022-01-24得票数 2
回答已采纳
1回答
我有一个div，最初有contenteditable=false。<div contenteditable="false" tabindex='1' style="width:100px;height:100px" id="my_div" >def text</div>
我想在双击后使它成为contenteditable=true<
浏览 3提问于2014-04-08得票数 1
contenteditable属性是一个枚举属性，其关键字为空字符串、true和false。空字符串和真关键字映射到真状态。我找到的所有示例和文档都表示“空字符串”，如下所示：我想知道，为了更简洁、更简洁的代码，以下内容是否同样有效(跨浏览器)：
<div contentedita
浏览 4提问于2015-01-22得票数 1
回答已采纳
我有一个react函数，可以输出一个div。这个div是可拖动的，它也应该是可编辑的。我试过使用contentEditable，当设置为'true‘时，它使div可编辑，但之后我不能再拖动项目，只能编辑它。有没有办法让div“可编辑性”打开和关闭，例如，使用onclick将contentEditable设置为“on”，使用doubleClick将contentEditable设置为“true</em
浏览 0提问于2020-03-01得票数 1
我有一个div，是contenteditable=true。当我双击它时，我触发了CKEditor中的内联编辑代码，它成功地显示了CKEditor工具栏。<div id="mycontent" contenteditable=true>
<span>The quick brown fox jumps over the lazy dog</span当我将LetterSpace设置为让我们假设为6px时，div</e
浏览 2提问于2013-12-14得票数 0
我有以下的html 我正在尝试解析数据，因为我使单元格内容可编辑。> <divr-name" contenteditable='true'><
浏览 43提问于2020-07-09得票数 0
回答已采纳
HTML属性是否需要=true才能工作？为什么没有它，即使它不是布尔属性，它也能工作？对此答案的注释指出，"Contenteditable不是布尔属性“：
<p contenteditable placeholder="Website">www.example.com</p>[<
浏览 2提问于2021-02-10得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
