web-dev-qa-db-ja.com

div contenteditableをtrueからfalseに変更する方法

ユーザーがdiv内のテキストを変更し、htmlコードをデータベースに保存できるページを取得しましたが、htmlコードを表示するときに、div contenteditableをfalseに変更します。何か方法はありますか???

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

<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>
javascripthtmlcsscontenteditable
14
Theng Ming

contenteditableを含む5つの要素があるので、アクセスを簡略化するためにIDを指定してみてください。

次のコードは、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);

デモ

または、ループできます

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

「contenteditable = true」を使用して各要素でそれを行うには、これを簡単に試すことができます：

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

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

この質問にjqueryのタグを付けていなくても、それを行う方法があるかどうかはすでに質問しました。そしてそれを行う私の方法はjqueryを使用することです。

これが[〜＃〜] fiddle [〜＃〜]です

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

またはdivのコンテンツをdbに保存した後。以下のこのコードを使用して、contenteditable属性がtrueからfalseのすべてのdivを編集します。

ヒアズ（[〜＃〜] fiddle [〜＃〜]

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

明、

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

それでおしまい ！！！

フィドルデモをここで検索

0
pearl's

これはすべてのブラウザで機能します

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

作業デモ

0
bugwheels94