I got a page which let user change the text inside div and save the html code into a database, however when I display back the html code I want to change the div contenteditable
to false. Is there any way???
<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>
<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>
Since you have 5 elements with contenteditable
, try giving them IDs 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);
Demo
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);
Even though you not tagged this question as jquery, you already asked if there is a way to do it. and my way to do it is using jquery.
Here's the FIDDLE
$('div').blur(function () {
$(this).attr('contenteditable', false);
});
or after saving the div content to db. use this code below to edit all div with contenteditable attribute true to false.
Heres' the FIDDLE
$('div[contenteditable="true"]').attr('contenteditable', false);
To do it on each elements with "contenteditable=true" you can simple try this:
var editableElements = document.querySelectorAll("[contenteditable=true]");
for (var i = 0; i < editableElements.length; ++i) {
editableElements[i].setAttribute("contentEditable", false);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With