So ändern Sie div contenteditable von true auf false

ich habe eine Seite, die es dem Benutzer ändern Sie den text innerhalb div-Element und speichern Sie die html-code in die db, aber wenn ich die Anzeige zurück, die html-code, den ich ändern möchte div contenteditable in false. gibt es eine Möglichkeit???

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

beschreiben Sie Ihr Szenario besser... können Sie ihn jederzeit ändern, indem Sie Dokument.getElementById("diviID").contenteditable=false;
wenn Sie die Anzeige zurück? obwohl form Einreichen....einige weitere Informationen benötigt für die richtige Antwort... ändern kann man es in php auch...
Sie können es erreichen einfach mit jquery
ich Anzeige wieder der html-code mittels php in eine andere Seite.

InformationsquelleAutor Theng Ming | 2013-06-08

19

Da haben Sie 5 Elemente mit contenteditable, versuchen Sie, geben Sie die IDs, die den Zugriff erleichtern.

Folgende code deaktiviert die 5 contentediable Elemente:
```
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

Oder können Sie eine Schleife
```
var editable_elements = document.querySelectorAll("[contenteditable=true]");
for(var i=0; i<editable_elements.length; i++)
    editable_elements[i].setAttribute("contenteditable", false);
```
+1, das ist die Magie, wie ich es mag
wow perfekt funktionieren wie ich will in der demo, aber können Sie mir sagen, wo ich brauche, um dieses Skript??
Es sollte Hinzugefügt werden in das Javascript, das kommt, nachdem Sie erfolgreich in der Datenbank gespeichert werden. Ich würde davon ausgehen, dass dies irgendwo in "function.js".
Ich würde das id-Attribut, so kann ich den Zugriff auf die einzelnen element direkt, oder würde ich bevorzugt verwenden, ein framework, das vereinfacht diese.
Für diejenigen wie mich Fragen, warum Typoskript widerspricht, das argument ist eigentlich ein string ("true") kein boolean (true). Funktioniert alles wunderbar mit ein boolescher Wert, aber es ist nicht das, was die Spezifikation sagt. developer.mozilla.org/en-US/docs/Web/API/HTMLElement/...

InformationsquelleAutor squirly

Tun es auf die einzelnen Elemente mit "contenteditable= "true" können Sie einfach versuchen, diese:

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

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

InformationsquelleAutor Fabien Sa

2

Obwohl Sie nicht markiert ist diese Frage so jquery, dass Sie bereits gefragt, ob es einen Weg, es zu tun. und meine Art, dies zu tun ist mithilfe von jquery.

Hier ist die FIDDLE
```
$('div').blur(function () {
    $(this).attr('contenteditable', false);
});
```
oder nach dem speichern den div-Inhalt zu db. verwenden Sie diesen code unten auf Bearbeiten alle div mit contenteditable-Attribut true auf false.

Heres' die FIDDLE
```
$('div[contenteditable="true"]').attr('contenteditable', false);
```
InformationsquelleAutor Vond Ritz

Diese Arbeit in allen browser

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

Arbeiten-Demonstration

Diese arbeiten in einem modernen browser(aber auch sehr viel vielseitiger)

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

Arbeiten-Demonstration

querySelectorAll gibt eine NodeList, nicht ein einzelnes element.

InformationsquelleAutor bugwheels94

Ming,

Können Sie die Schaltfläche "Senden" am Ende Ihres Div. So, wenn der Benutzer fertig ist mit dem Bearbeiten, kann er das Formular abschicken, können Sie einen Beitrag zu speichern Sie diesen text in der Datenbank und auch der-Taste wird der Inhalt nicht bearbeitet werden. Hier habe ich ein button, um Ihren code und ein bisschen 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 (fügen Sie einfach eine jquery-Datei in Ihrem code)

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