使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中的文本内容不为空时，我们将其样式设置为有效状态（绿色边框），否则设置为无效状态（红色边框）。
这种实现方式可以用于各种场景，例如表单验证、富文本编辑器等。腾讯云提供了多种云计算产品，如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。具体产品介绍和相关链接地址可以在腾讯云官方网站上查找。
相关·内容
我在父contenteditable=“true”中使用嵌套的contenteditable="false“元素有非常不同的行为：
<pre>
<div contenteditable="true">
<span>I'm supposed to be editable</span>
<p contenteditable="false">I'm NOT supposed to be editable.<br>Neither should I.&l
浏览 3提问于2016-06-20得票数 3
回答已采纳
我有以下代码：
<html>
<style type="text/css">
DIV { display:inline; border: solid red 1px; }
.editable { background:yellow; }
</style>
<div class="editable" contentEditable="true"> This is test text. This is test text.This is test text.This is test t
浏览 0提问于2009-11-12得票数 11
4回答
html
<div contentEditable="true">testing....</div>
jQuery
$(document).ready(function(){
$('[contenteditable]').removeAttr('contenteditable');
});
上面的代码很好，而且工作正常。你可以感觉到它。
现在，试试这个
$('[contentEditable]').removeAttr('contentEditable');
// notice th
浏览 6提问于2010-07-07得票数 7
回答已采纳
enter code here，我正在尝试用这样的函数在网上编辑一些东西
function toggle_editable (div, cssclass) {
var classToEdit = document.getElementsByClassName(cssclass)
for (i = 0;classToEdit.length; i++) {
if (classToEdit[i].contentEditable == false) {
classToEdit[i].contentEditable = true ;
浏览 0提问于2014-12-26得票数 1
回答已采纳
我们可以通过使用contentEditable="true"属性使HTML元素可编辑：
<div contentEditable="true">
This text can be edited by the user.
</div>
当用户编辑内容时，如何使元素周围的蓝色框消失？
我尝试过使用:active和:hover伪类(以及border: none)，但都没有效果。
浏览 3提问于2015-02-01得票数 1
回答已采纳
1回答
我正在使用一个使用s的表来获取数据。之所以这样做，是因为它从数据库中获取信息，出于设计目的，它是这样做的。最近，我让tablesorter非常好地工作，但是我不能让它处理日期，它按一天的数目对行进行排序。我正在使用dd-MMM-yyyy格式(即。2011年10月2日至10月)我已经修改了原始代码，但它的概念几乎是相同的。我试过使用addParser()，它附带了表运营器，但我没有运气。
下面是HTML：
<table class="tablesorter">
<thead>
<tr>
<th>A</t
浏览 2提问于2013-10-21得票数 0
回答已采纳
2回答
我正在尝试在Javascript中使用拖放。到目前为止，它工作正常，但我在可拖动对象中的可编辑内容不再可用(因此它们不再是正常的方式)
这是一个dropable对象的示例：
<div id="ziel_2" draggable="true" trvdroptarget="true">
<div> some text<br>some text</div>
<div contenteditable="true">some text</div>
&l
浏览 0提问于2016-01-04得票数 1
我创建了一个像下面这样的角反应形式
component.html
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<h5 class="card-title text-center">Login</h5>
<div class="form-group">
<label class="text-success" for="exampleInputEmail1"
浏览 10提问于2022-01-19得票数 0
回答已采纳
我有一个div，它通过使用contenteditable作为“输入”使用，当启用它时，它工作得很好。但是有一种情况是，我需要通过设置contenteditable='false'来禁用“输入”，这会使div失去它的高度(正如您在中看到的)。
<div contenteditable="true" class="visible-borders"></div>
<div contenteditable="false" class="visible-borders"></div&
浏览 3提问于2015-10-22得票数 1
回答已采纳
2回答
我把这支笔放在一起：
这样做的想法是，使用同级选择器，当我想要样式的元素前面的元素聚焦时，我想要对某个元素进行样式化。
它在输入元素中工作得很好，但在使用带有contenteditable属性的元素时却失败了：
.container,
form {
width: 30%;
display: flex;
flex-direction: column;
gap: 10px;
}
div[contenteditable="true"]::before {
text-color: gray;
opacity: 0.6;
content: attr(pl
浏览 2提问于2021-09-30得票数 0
回答已采纳
1回答
似乎找不到这方面的任何信息。可以在可内容的div上使用ng模式吗？当我尝试时，它不起作用：
<div contenteditable="true" ng-model="x.number" ng-pattern='/^(\d)+$/'>{{ x.number }}</div>
更具体地说，当我键入无效条目时，div元素上的ng验证类不会改变。
浏览 2提问于2015-10-13得票数 0
回答已采纳
当用户在contentEditable div中按enter键时，它会生成div。如何避免这种情况并创建p或/和br？(请仅限jQuery)
点击这里查看：
jQuery：
$('#input').keypress(function(e) {
if(e.which == 13) { // if press enter
// alert('You pressed enter!'); //it works
// it does not work:
// e.preventDef
浏览 0提问于2015-01-25得票数 1
我有以下三个状态复选框：
<div>
<input required type="checkbox" id="effectiveness" name="effectiveness">
</div>
在开始时，将值设置为jQuery中间值，如下所示：
$("#effectiveness").prop("indeterminate", true);
必需的属性检查选中的属性是否为真。但我希望checked="true“和checked="false”是有效的
浏览 6提问于2020-07-09得票数 2
回答已采纳
.Is属性在contentEditable =“true”的div上不起作用有没有办法让这个字段成为必填字段，这样div就会有一个有效和无效的状态？
浏览 58提问于2018-07-27得票数 5
回答已采纳
为了用contenteditable区域和Meteor修复文本复制错误，我做了以下工作：
document_page.js:
Template.documentPage.helpers({
contenteditable: function() {
return '<div class="content" contenteditable="true">' + this.content + '</div>'
},
document_page.html:
<div class="
浏览 6提问于2015-01-28得票数 0
回答已采纳
1回答
我在contenteditable div上打印一个mysql字段的值，我需要它采用与之对应的结构。使用相同的divs和换行符br。 我尝试过php的nl2br函数，但它只生成换行符br，所以它不适合我。我需要完整的结构。 例如： <div id="textbox" contenteditable="true"><?php echo nl2br($text); ?></div> 其中，$text是数据库中带换行符的文本\n。 因此，在执行nl2br时，请通过br将它们全部更改。 我现在得到的信息是： <div id=&
浏览 21提问于2019-05-11得票数 0
回答已采纳
这一次，我花了一些时间进行分析，然后才问。
问题：
我有几个div，其中包含几个带有‘contenteditable=’true‘的孩子。
如果我在每个‘contenteditable=’true‘div中添加了大量文本，然后开始拖动它，我的性能就会直线下降。
因此，我将‘contenteditable=“true’div更改为输入字段。
性能继续下降，同样的方式。
在网站上，我使用dev工具从所有子程序中删除可编辑的内容，并且在拖动.时性能很好。
可能的解决方案：
临时删除属性"contenteditable“，或者在拖放开始时将其设置为"false”，并在停止后添加反向:我
浏览 0提问于2018-12-07得票数 0
我在和angular2玩。我想要更改div的值-需要将我的contenteditable="false"页面中的所有contenteditable="true"更改为contenteditable=“true”。
请注意，有时contenteditable="false“将添加到DIV标记中，有时会添加到P、h1标记或其他标记中。
html看起来如下：
<button (click)="selectDiv()">select div</button>
<section>
<di
浏览 3提问于2017-06-05得票数 2
回答已采纳
我有一些这样的div：
<div id="op" contentEditable="true">hello<div class="dynamic">......sth
</div> <div class="dynamic"> ...sth
</div> .......<div class="dynamic"> </div>.. <div class="dynamic"> </div>..<
浏览 1提问于2013-07-17得票数 0
回答已采纳
这是我的代码：
<div contenteditable=true style="position:absolute;top:300px;width:200px;height:300px;background:red;color:black;">
ddwwwwwwwwwwwwwwwwwwwww
</div>
我使用contenteditable=true来使div可编辑，但它也可以在火狐上调整大小和拖动。
那么如何使其不可调整大小和不可拖动呢？
谢谢
浏览 0提问于2010-11-26得票数 1
回答已采纳
当表单中的contenteditable span无效时，我试图显示自定义错误消息。
我的HTML：
<div id="errors"></div>
<form method="post" action="#">
<span required name="first_name" id="first_name" contenteditable placeholder="First Name"></span><br><
浏览 3提问于2017-02-08得票数 1
回答已采纳
我有一个动态创建的表，它利用了"contenteditable“。
最近，我有一个用户尝试通过Microsoft Edge使用该网页，但所有字段都不起作用。然后我也在我的电脑上试了试，也遇到了同样的问题。
我使用Google Chrome进行开发，它工作得非常好，在文档中它说支持Edge。
下面是生成my tables行的代码：
while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
echo "<tr>";
echo "<td style='width:10%;ov
浏览 13提问于2016-09-08得票数 1
回答已采纳
粘贴文本之后，我想获得目标div的ID。稍后动态生成div，代码不工作：
HTML
<div class="wrap">
<div class="entry" id="1" contenteditable="true">paste here</div>
<div class="entry" id="2" contenteditable="true">paste here</div>
<div class="
浏览 5提问于2014-04-14得票数 0
回答已采纳
2回答
我有一些html，如下(对于IE9)：
<div contenteditable="true">
Some editable text
<span class="code" contenteditable="true" unselectable="on">uneditable text</span>
more editable text
</div>
在IE9中，span内容必须设置为"true“以使span不可编辑，而在Chrome中，它被设置为"
浏览 2提问于2014-11-20得票数 0
我想要更改div中元素的背景，仅当悬停时且其属性contenteditable为true时。
我试过了：
#myDiv[contenteditable="true"]:hover { background-color: rgba(217, 245, 255,0.5);}
但它不起作用。如果我将伪类移到div：
#myDiv:hover [contenteditable="true"] { background-color: rgba(217, 245, 255,0.5);}
然后所有带有contenteditable=true的字段都会得到背景...在纯cs
浏览 0提问于2016-02-10得票数 12
回答已采纳
我的页面中有CKEditor，我想在InlineEditing模式下使用它，在某些DIVs上，我在其中设置了contenteditable='true'属性。
对于每个可编辑的DIV，我都有一个按钮，而不是切换到contenteditable到'true'和'false'，以便启用或禁用编辑。
在之后，首先我设置如下：
CKEDITOR.disableAutoInline = true;
然后，我确定了每个DIV的可编辑性：
$('.toggle-edit').click(function(e){
var editedDiv
浏览 2提问于2015-02-24得票数 0
我正在尝试创建一个内联编辑器。
<div contentEditable="true">
<div> <span contentEditable="false" >hello</span></div>
<div > <span contentEditable="false">world</span></div>
</div>
当我们将光标移动到第一个文本前面并单击删除按钮时，它将删除该文本节点。在这里，hello t
浏览 0提问于2020-03-20得票数 1
我有多个标签，被设置为可编辑(contentEditable="true")。有没有办法在加载之前将内容存储在div中，并在重新加载后粘贴相同的内容，或者有其他方法可以做到这一点？我在编程领域是个新手。
<div contentEditable="true" id="main" key="main" class="main" >
<div contentEditable="true" id="div1" onfocusout="myFunction()&
浏览 13提问于2019-10-23得票数 0
回答已采纳
3回答
我有三个contenteditable div，我想知道用户通过Tab键或鼠标单击将光标或插入符号放在了哪个div中。
<div contenteditable="true"></div>
<div contenteditable="true"></div>
<div contenteditable="true"></div>
有人能帮帮我吗？
浏览 0提问于2013-05-15得票数 1
回答已采纳
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div>
<div id="b" class="fif">text2</div>
</div>
与上面的代码一样，我有一个contenteditable div和许多div(子div)。子div的数量动态变化，div标签之间的内容也是动态变
浏览 1提问于2013-03-02得票数 9
假设我有一组contenteditable="true" div。
<div id="0" contenteditable="true"></div>
<div id="1" contenteditable..></div>
<div...etc></div>
我不能有一个div，多个div是必须的。我怎么能突出显示多个div的内容？使用范围？还要别的吗？
浏览 2提问于2011-01-24得票数 7
回答已采纳
当可内容div有焦点时，我希望更改另一个元素的样式，如下所示：
[contenteditable="true"]:focus .testClass {
background-color: black;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
不幸的是，上面的内容不起作用，我也尝试了下面的CSS：
[contenteditable="true&
浏览 2提问于2014-10-30得票数 1
回答已采纳
我用Javascript绘制一个div，并在构建它时向它添加各种属性。我可以获得it、类和样式属性，但它忽略了“内容可编辑”。
var elemText = document.createElement('div');
elemText.className = 'elem';
elemText.style.background = "none";
elemText.id = "elementID";
elemText.contenteditable = "true";
我也试过
elemText.attribute
浏览 4提问于2014-01-03得票数 10
回答已采纳
2回答
我有一张很不寻常的桌子。我很难像这个那样返回特定元素的相对头。
该表的结构类似于以下内容：
<table border>
<tbody>
<tr>
<th></th>
<th></th>
<th colspan="3">Parameter 1</th>
<th colspan="2">Parameter 2</th>
浏览 2提问于2013-11-08得票数 2
回答已采纳
我有一个html元素来输入contenteditable=true输入文本。此字段为必填字段。我可以对这个元素使用asp-for属性吗？
<div asp-for="Comment" contenteditable="true"></div>
<span asp-validation-for="Comment" class="text-danger"></span>
感谢您的评论
浏览 2提问于2017-11-06得票数 0
我有一个div的输出内容，有时输出链接。但是当这个输出div将contentEditable属性设置为true时，if使链接不可点击。
奇怪的是，您仍然可以悬停在它之上，在尝试单击它之前，它看起来和行为都像一个链接。(蓝色的颜色，下划线，悬停改变蓝色的颜色等等)
但是当你点击它的时候，它不会带你去链接。我可以右击，说打开或打开在一个新的窗口，它运行良好。
有没有办法让它再次点击，这样用户就不必一直右键点击它了吗？
<div contentEditable='true'>
Some content with link: <a href='htt
浏览 7提问于2015-04-16得票数 2
回答已采纳
我已经创建了一个具有属性contenteditable=true的DIV，并使用属性contenteditable=false附加了像span和a这样的子元素。
我想测试整个节点是否可以用一个退格键删除，令我惊讶的是Firefox不能删除这些元素。
此外，这在除Firefox之外的所有主要桌面浏览器中都能正常工作。
对此有任何线索，或者可能的解决方法是什么？
在bugzilla 上找到了确切的问题。
浏览 0提问于2010-02-11得票数 6
回答已采纳
3回答
我在一个页面上有一个内容可编辑的div列表。我无法选择所有div的内容。 由于每个div都是可单独编辑的，作为替代，我希望在选择并拖动时突出显示div。如下所示： ? .editable {
height: 30px;
line-height: 30px;
padding: 5px;
} <div>
<div class="editable" contenteditable="true">Block 1</div>
<div class="editable" conten
浏览 29提问于2020-09-07得票数 1
我试图在输入框中插入文本，输入框位于contenteditable div中。当我单击“输入”框时，光标不会出现。双击输入框后，我可以插入文本。这个问题发生在IE中。
<div contenteditable="true">
<input type="text">
</div>
谢谢。
浏览 3提问于2015-04-25得票数 3
回答已采纳
我有以下代码：
<div contentEditable="true">
Blah blah <a href="http://google.com">Google</a> Blah blah
</div>
有没有办法让这个a在不移动锚点的情况下是可点击的，不可编辑的？
浏览 57提问于2012-08-22得票数 26
回答已采纳
我有一个在DOM中手动编辑的文本节点，当调用render()方法时，该节点不会被React更新。
使用官方中的示例演示
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
浏览 11提问于2020-03-30得票数 0
我想知道如何通过选择div更新聊天主题。我正在使用Jquery。在这方面的工作后，我将整合这个联系形式7插件在wordpress。我也想知道这是否可能。谢谢!
<div class="custom-contact-form">
<div class="first-part"><strong class="hey">Hey there,</strong><br>
<br>
I am <span id="n
浏览 5提问于2016-01-23得票数 0
回答已采纳
如何使WinJS.UI.ListLayout contenteditable="true"中item中某一列的内容可编辑，但其余列表列对ListLayout的其他操作(如itemsReorderable="true" )保持活动状态
例如，列：
<div class="person" data-win-bind="innerText: person" contenteditable="true"></div>
列表视图配置：
data-win-options="{ layout:{t
浏览 11提问于2018-08-24得票数 0
回答已采纳
HTML属性是否需要=true才能工作？为什么没有它，即使它不是布尔属性，它也能工作？
对此答案的注释指出，"Contenteditable不是布尔属性“：
例如，如果我有以下代码：
<p contenteditable placeholder="Website">www.example.com</p>
这似乎非常好，而且标记是可编辑的，即使我没有指定=true。
我注意到的另一件事是，如果我不指定=true，那么用CSS定位它只适用于：
[contenteditable]而非[contenteditable="true"]
浏览 2提问于2021-02-10得票数 1
回答已采纳
有没有办法有一个受控的输入contentEditable div？ 我正在寻找这种确切的行为，但我需要使用contentEditable div而不是输入： <input value={this.state.text}></input> 其中输入不显示键入的内容，而是显示this.state.text中的内容。 只是换出一个contentEditable div是行不通的，它显示的是键入的内容，而不是this.state.text中的内容 <div contentEditable={true} value={this.state.text}></di
浏览 46提问于2020-03-28得票数 1
回答已采纳
当有带div的空contenteditable="true"时
CSS：
[contenteditable="true"] {
border: 1px dashed #dedede;
padding: 3px;
}
HTML：
<div contenteditable="true">
<!-- blank by default -->
</div>
在IE和Chrome中，它显示的高度像一个正常的输入字段与小填充。在Firefox中，它只显示了我在样式中添加的3px填充。W/o，它会塌陷
浏览 7提问于2014-05-07得票数 10
回答已采纳
我有一个可满足的div，它拥有自己的状态，允许我检查它自己的长度并显示警告。
这个可编辑的div是从一个类似表单的组件中调用的，该组件也保存了它的状态，并在触发onBlur时检索contenteditable div的innerText。
但是，如果用户在div被聚焦时单击任何按钮，它将只处理onBlur()事件，而不会处理在单击该按钮时应该发生的onClick。因此，从div焦点状态到点击(例如提交)需要两次点击，而我只希望有一次点击。
我希望和期望的行为是：
class Form extends React.Component {
state = {
name: this.p
浏览 1提问于2018-04-23得票数 0
我正在尝试制作一个可以插入特殊类型元素的编辑器。我想如果你在它里面的元素上设置contenteditable为false，它不会让你在里面输入(这很好)，但是它不会把光标放在前面或后面，光标就会消失。 有没有一种方法可以阻止用户在元素内部键入，但当你单击它时，仍然保持光标焦点，就像它是一个普通的文本符号一样？ div div {
width: 30px;
height: 30px;
background: red;
display: inline-block;
}
div {background: #ccc} <div contenteditable="t
浏览 111提问于2019-06-26得票数 4
我使用jQuery将I添加到所有需要的元素中。它无法工作，并且在控制台中显示任何错误。
我希望jQuery循环遍历我的所有.mm元素，并根据它们的订单添加id，并向它们的子.cards添加id，如下所示
JQUERY
//assigning ids codes on page load
var lists = $("body > div.mm");
$.each(lists,function( index, value ){
var cards = lists[index].children();
lists[index].
浏览 0提问于2019-01-30得票数 0
1回答
现在，我正在使用这一行代码来禁用tinyMCE
tinyMCE.get('tinymce_id').getBody().setAttribute('contenteditable', false);
但是，在初始化时似乎并没有禁用它。只有当我选择单选按钮时，它才会被禁用。
如何在特定的tinyMCE编辑器初始化后禁用它？如果可能的话，我想要一个同样适用于IE8的答案。提前感谢！
JQuery :
require(['tinymce'],function(){
var disableInputs = function(
浏览 3提问于2014-08-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
