Theng Ming Theng Ming - 1 year ago 184
Javascript Question

How to change div contenteditable from true to false

i got a page which let user change the text inside div and save the html code into db, however when i display back the html code i want to change the div contenteditable into false. is there any way???

<title>Generate Poster</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link href='' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href=""; />
<script src=""></script>
<script src=""></script>
<script src="function.js"></script>

<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>
<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;" >


Answer Source

Since you have 5 elements with contenteditable, try giving them ID's to simplify access.

The following code deactivates the 5 contentediable elements:

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);


Or you can you a loop

var editable_elements = document.querySelectorAll("[contenteditable=true]");
for(var i=0; i<editable_elements.length; i++)
    editable_elements[i].setAttribute("contentEditable", false);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download