Question

95

How to change div contenteditable from true to false

rated 0 times [ 102] [ 7] / answers: 1 / hits: 38605 / 11 Years ago, sat, june 8, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacie

Add To Favorites

Follow

Total Points: 476

Total Questions: 92

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Tue, Mar 29, 2022

2 Years ago

stacie questions

1 How to perform validation of a array field using formik and yup validation

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Validation not working on angular reactive forms

Fri, Jun 26, 20, 00:00, 4 Years ago

1 CropperJS Not working well when using it in modal

Thu, Jan 23, 20, 00:00, 4 Years ago

1 Keyboard shortcuts in React, the react-hotkeys library

Fri, Aug 30, 19, 00:00, 5 Years ago

1 Date Pipe in Angular 8

Fri, Aug 2, 19, 00:00, 5 Years ago

View All

answered 11 Years ago cristian · Accepted Answer

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