Comment changer div contenteditable de vrai à faux

j'ai une page qui permet à l'utilisateur de modifier le texte à l'intérieur de la div et enregistrez le code html dans db, mais quand je suis l'arrière de l'écran le code html je veux changer la div contenteditable en faux. est-il de toute façon???

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

source d'informationauteur Theng Ming

  1. 18

    Puisque vous avez 5 éléments avec contenteditableessayez de leur donner des Id pour simplifier l'accès.

    Le code suivant désactive le 5 contentediable éléments:

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

    Démo

    Ou vous pouvez utiliser une boucle

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

    À faire sur chacun des éléments avec "contenteditable=true", vous pouvez simplement essayer ceci:

    var editableElements = document.querySelectorAll("[contenteditable=true]");
for (var i = 0; i < editableElements.length; ++i) {
editableElements[i].setAttribute("contentEditable", false);
}
  3. 2

    Même si vous ne marqués cette question comme jquery, vous avez déjà demandé si il ya un moyen de le faire. et ma façon de le faire est à l'aide de jquery.

    Voici la VIOLON

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

    ou après l'enregistrement de la div de contenu pour la base de données. utilisez ce code ci-dessous pour modifier toutes les div avec l'attribut contenteditable true à false.

    Heres' la VIOLON

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

    Ce travail dans tous les navigateurs

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

    Travail de Démonstration

    Cela fonctionne dans le navigateur moderne(mais trop versatile)

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

    Travail de Démonstration

  5. 0

    Ming,

    Vous pouvez utiliser un bouton "Soumettre" à la fin de votre Div. Ainsi, lorsque l'utilisateur se fait avec la modification, il peut soumettre le formulaire, vous pouvez faire un post pour mettre ce texte dans la base de données et aussi le bouton rendra le contenu non-modifiable. Ici j'ai ajouté un bouton de votre code et un peu de 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 (il suffit d'inclure un fichier jquery pour votre code)

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

    C'est tout !!!

    Trouver un violon démo ici