Come modificare div contenteditable da true a false

Ho una pagina che consente all'utente di modificare il testo all'interno di div e salvare il codice html in db, tuttavia quando visualizzo il codice html voglio cambiare il div contenteditable in false. c'è un modo ???Come modificare div contenteditable da true a false

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

fonte

2013-06-08 Theng Ming

descrivere lo scenario migliore ... si può sempre cambiare da document.getElementById ("diviID") contenteditable = false.; – pinkpanther

quando si torna indietro? anche se il modulo invia .... sono necessarie ulteriori informazioni per una risposta corretta ... puoi cambiarlo in php anche ... – pinkpanther

puoi ottenerlo facilmente con jquery –

Poiché hai 5 elementi con contenteditable, prova a fornire loro ID per semplificare l'accesso.

Il codice seguente disattiva le 5 contentediable elementi:

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

Oppure si può fare un ciclo

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

fonte

2013-06-08 04:45:31 squirly

+1, questa è la magia che mi piace – pinkpanther

wow funziona perfettamente come voglio in demo, ma puoi dirmi dove devo aggiungere questo script ?? –

Dovrebbe essere aggiunto nel Javascript che viene dopo aver salvato con successo nel database. Suppongo che questo sia da qualche parte in "function.js". – squirly

Questo lavoro in tutti i browser

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

Working Demonstration

Questo funziona in browser moderno (ma troppo versatile)

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

Working Demonstration

fonte

2013-06-08 04:34:07 bugwheels94

'querySelectorAll' restituisce un' NodeList', non un singolo elemento. – Blender

Anche se non contrassegnati questa domanda come jQuery, è già ha chiesto se c'è un modo per farlo. e il mio modo di farlo è usare jquery.

Ecco il FIDDLE

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

o dopo aver salvato il contenuto div al db. usa questo codice qui sotto per modificare tutti i div con l'attributo contenteditable true a false.

Heres' il FIDDLE

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

fonte

2013-06-08 04:50:27

Ming,

È possibile utilizzare un pulsante Invia al termine della vostra Div. Quindi, quando l'utente ha terminato la modifica, può inviare il modulo, è possibile fare un post per salvare questo testo nel database e anche il pulsante renderà il contenuto non modificabile. Qui ho aggiunto un pulsante al tuo codice e un po 'di 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 (basta inserire un file jquery al codice)

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

Ecco fatto !!!

Find a fiddle demo here

fonte

2013-06-08 04:55:33

di farlo su ogni elemento con "contenteditable = true" si può provare questo semplice:

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

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

fonte

2013-06-09 21:55:53

Come modificare div contenteditable da true a false

risposta

Problemi correlati