Làm thế nào để thay đổi div contenteditable từ true thành false

tôi có một trang cho phép người dùng thay đổi văn bản bên trong div và lưu mã html vào db, tuy nhiên khi tôi hiển thị lại mã html tôi muốn thay đổi div contenteditable thành false. Không có cách nào khác ư???Làm thế nào để thay đổi div contenteditable từ true thành 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>

Nguồn

2013-06-08 Theng Ming

mô tả kịch bản của bạn tốt hơn ... bạn luôn có thể thay đổi nó bằng document.getElementById ("diviID"). contenteditable = false; – pinkpanther

khi nào bạn hiển thị lại? mặc dù hình thức gửi .... một số thông tin cần thiết cho câu trả lời đúng ... bạn có thể thay đổi nó trong php cũng ... – pinkpanther

bạn có thể đạt được nó một cách dễ dàng với jquery –

Vì bạn có 5 phần tử với contenteditable, hãy thử cấp cho chúng ID để đơn giản hóa quyền truy cập.

Các mã sau deactivates 5 contentediable yếu tố:

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

Hoặc bạn có thể bạn một vòng lặp

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

Nguồn

2013-06-08 04:45:31 squirly

+1, đó là phép thuật tôi thích nó – pinkpanther

wow làm việc hoàn hảo như tôi muốn trong bản demo, nhưng bạn có thể cho tôi biết nơi nào tôi cần phải thêm tập lệnh này trong ?? –

Nó sẽ được thêm vào trong Javascript sau khi bạn lưu thành công vào cơ sở dữ liệu. Tôi cho rằng đây là một nơi nào đó trong "function.js". – squirly

làm việc trong tất cả các trình duyệt này

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

Working Demonstration

này sẽ làm việc trong trình duyệt hiện đại (nhưng quá nhiều linh hoạt)

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

Working Demonstration

Nguồn

2013-06-08 04:34:07 bugwheels94

'querySelectorAll' trả về một' NodeList', không phải là một phần tử đơn lẻ. – Blender

Mặc dù bạn không được gắn thẻ câu hỏi này như jquery, bạn đã được hỏi có cách nào để làm điều đó không. và cách làm của tôi là dùng jquery.

Đây là FIDDLE

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

hoặc sau khi lưu nội dung div để db. sử dụng mã này bên dưới để chỉnh sửa tất cả div với thuộc tính có thể chỉnh sửa đúng thành sai.

Heres' các FIDDLE

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

Nguồn

2013-06-08 04:50:27

Ming,

Bạn có thể sử dụng một nút Submit ở phần cuối của Div của bạn. Vì vậy, khi người dùng được thực hiện với chỉnh sửa, ông có thể gửi biểu mẫu, bạn có thể làm một bài đăng để lưu văn bản này trong cơ sở dữ liệu và cũng có nút sẽ làm cho nội dung không thể chỉnh sửa. Ở đây tôi đã thêm một nút vào mã của bạn và một chút 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 (chỉ bao gồm một tập tin jquery để mã của bạn)

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

Thats it !!!

Find a fiddle demo here

Nguồn

2013-06-08 04:55:33

Để làm điều đó trên mỗi yếu tố với "contenteditable = true" bạn có thể đơn giản thử điều này:

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

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

Nguồn

2013-06-09 21:55:53

Làm thế nào để thay đổi div contenteditable từ true thành false

Trả lời

Các vấn đề liên quan