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

Ответ 1

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

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

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

демонстрация

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

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

Ответ 2

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

Здесь FIDDLE

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

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

Heres ' FIDDLE

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

Ответ 3

Чтобы сделать это на каждом элементе с "contenteditable = true", вы можете просто попробовать следующее:

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

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

Ответ 4

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

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

Рабочие демонстрации

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

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

Рабочие демонстрации

Ответ 5

Мин,

Вы можете использовать кнопку "Отправить" в конце вашего 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');
    });
});

Вот оно!!!

Найти здесь скриптную демонстрацию