Как изменить div contenteditable с true на false

У меня есть страница, которая позволяет пользователю изменять текст внутри div и сохранять html-код в db, однако, когда я возвращаю html-код, я хочу изменить div contenteditable в false. там в любом случае???Как изменить div contenteditable с true на 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>

источник

2013-06-08 Theng Ming

описать ваш сценарий лучше ... вы всегда можете изменить его document.getElementById ("diviID") contenteditable = ложь. – pinkpanther

если вы показываете назад? хотя форма submit .... требуется некоторая дополнительная информация для правильного ответа ... вы можете изменить ее в php также ... – pinkpanther

вы можете легко ее достичь с помощью jquery –

Поскольку у вас есть 5 элементов с contenteditable, попробуйте дать им идентификаторы, чтобы упростить доступ.

Следующий код деактивирует 5 contentediable элементы:

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

Или вы можете ли вы цикл

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

источник

2013-06-08 04:45:31 squirly

+1, это волшебство мне нравится – pinkpanther

wow работать отлично, как я хочу в демо, но можете ли вы сказать мне, где мне нужно добавить этот скрипт в ?? –

Он должен быть добавлен в Javascript, который появляется после успешного сохранения в базе данных. Я бы предположил, что это где-то в «function.js». – squirly

Эта работа во всех браузере

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

Working Demonstration

Это будет работать в современном браузере (но слишком универсален)

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

Working Demonstration

источник

2013-06-08 04:34:07 bugwheels94

'querySelectorAll' возвращает' NodeList', а не один элемент. – Blender

Даже если вы не помечена этот вопрос как JQuery, вы уже спросил, есть ли способ сделать это. и мой способ сделать это - использовать jquery.

Вот FIDDLE

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

или после сохранения содержимого Div в БД. используйте этот код ниже, чтобы отредактировать все div с атрибутом contenteditable true для false.

Heres' FIDDLE

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

источник

2013-06-08 04:50:27

Мин,

Вы можете использовать кнопку Отправить в конце вашего Div. Поэтому, когда пользователь закончил редактирование, он может отправить форму, вы можете сделать сообщение, чтобы сохранить этот текст в базе данных, а также кнопка сделает контент недоступным для редактирования. Здесь я добавил кнопку к вашему коду и немного 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 (просто включить файл Jquery в код)

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

То оно !!!

Find a fiddle demo here

источник

2013-06-08 04:55:33

Для этого на каждом элемент с «contenteditable = истина» вы можете просто попробовать это:

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

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

источник

2013-06-09 21:55:53

Как изменить div contenteditable с true на false

ответ

Смежные вопросы