Question

我有一个页面让用户更改div中的文本并将html代码保存到db中，但是当我显示回html代码时，我想将div contenteditable更改为false。有什么办法???

    <html>
    <head>
    <title>Generate Poster</title>
    <link rel="stylesheet" type="text/css" href="style1.css">
    <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"; />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 <script src="function.js"></script>
</head>
<body>

<h1>H1</h1>
<div class="drag">
<div id="box" style="padding-left: 45px; background: url(2.png);">
<div class="line-division1" style="margin-top: 100px; background-color: #003663;"></div>
<div id="sub-title" contenteditable="true"><span>YOU'RE IN FOR A</span></div>
<div id="title" contenteditable="true">Wild <font color="#90a6b9">Ride</font></div>
<div class="line-division1" style="margin-top: 20px; background-color: #003663;"></div>
<div class="date1" contenteditable="true">THIS JANUARY 21ST 2014</div>
<div class="date1" contenteditable="true">1337 ACCELERATOR, KL</div>
<div class="line-division1" style="width: 150px; height:22px; float: left; background-color: #003663; margin-top: 50px;"></div>
<div class="line-division1" style="width: 150px; height:22px; float: right; background-color: #003663; margin-top: 50px; margin-right: 50px;"></div>
<div class="date1" style="font-size: 80px; width: 500px;" contenteditable="true">JOIN US</div>
</br>
<div class="date1" style="font-size: 38px; margin-top: 20px;">FOR A RIDE OF YOUR LIFE TIME</div>
<img src="waterm.png" style="zoom:30%; margin-top: 280px; margin-left: 2000px;" >

</div>
</div>

Answer 1

由于您有5个contenteditable元素，请尝试为其提供ID以简化访问。

以下代码停用了5个contentediable元素：

var editable_elements = document.querySelectorAll("[contenteditable=true]");
editable_elements[0].setAttribute("contenteditable", false);
editable_elements[1].setAttribute("contenteditable", false);
editable_elements[2].setAttribute("contenteditable", false);
editable_elements[3].setAttribute("contenteditable", false);
editable_elements[4].setAttribute("contenteditable", false);

Demo

或者你可以循环

var editable_elements = document.querySelectorAll("[contenteditable=true]");
for(var i=0; i<editable_elements.length; i++)
    editable_elements[i].setAttribute("contenteditable", false);

Answer 2

即使你没有将这个问题标记为jquery，你已经问过是否有办法做到这一点。我的方法就是使用jquery。

这是 FIDDLE

$('div').blur(function () {
    $(this).attr('contenteditable', false);
});

或将div内容保存到db后。使用下面的代码编辑所有div，其中contenteditable属性为true。

继承人 FIDDLE

$('div[contenteditable="true"]').attr('contenteditable', false);

Answer 3

要使用“contenteditable = true”对每个元素执行此操作，您可以轻松尝试：

var editableElements = document.querySelectorAll("[contenteditable=true]");

for (var i = 0; i < editableElements.length; ++i) {
    editableElements[i].setAttribute("contentEditable", false);
}

Answer 4

这项工作适用于所有浏览器

 var arr=document.getElementsByTagName("div");
    for(var i=0;i<document.getElementsByTagName("div").length;i++)
  document.getElementsByTagName("div")[i].removeAttribute("contenteditable");

Working Demonstration

这将适用于现代浏览器（但功能太多）

for(var i=0;i<document.querySelectorAll("div").length;i++)
document.querySelectorAll("div")[i].removeAttribute("contenteditable");

Working Demonstration

Answer 5

明，

您可以使用Div末尾的“提交”按钮。因此，当用户完成编辑后，他可以提交表单，您可以发布帖子将此文本保存在数据库中，此按钮也会使内容不可编辑。在这里，我为您的代码添加了一个按钮，并添加了一些jQuery。

<强> HTML

 <div id="box" style="padding-left: 45px; background: url(2.png);">
<div class="line-division1" style="margin-top: 100px; background-color: #003663;">        </div>
<div id="sub-title" contenteditable="true"><span>YOU'RE IN FOR A</span></div>
<div id="title" contenteditable="true">Wild <font color="#90a6b9">Ride</font></div>
<div class="line-division1" style="margin-top: 20px; background-color: #003663;"></div>
<div class="date1" contenteditable="true">THIS JANUARY 21ST 2014</div>
<div class="date1" contenteditable="true">1337 ACCELERATOR, KL</div>
<div class="line-division1" style="width: 150px; height:22px; float: left; background-  color: #003663; margin-top: 50px;"></div>
<div class="line-division1" style="width: 150px; height:22px; float: right; background-color: #003663; margin-top: 50px; margin-right: 50px;"></div>
<div class="date1" style="font-size: 80px; width: 500px;" contenteditable="true">JOIN US</div>
</br>
<div class="date1" style="font-size: 38px; margin-top: 20px;">FOR A RIDE OF YOUR LIFE TIME</div>
<button text="Submit">Submit</button>

jQuery （只需在代码中包含一个jquery文件）

$(function(){
    $('button').click(function(){
        $('div').attr('contenteditable', 'false');
    });
});

多数民众赞成！

Find a fiddle demo here

Answer 6

与香草js一起完成一行

document.querySelectorAll("[contenteditable=true]").forEach(el => el.setAttribute("contentEditable", false))

如何将div contenteditable从true更改为false

6 个答案: