[英]How to change div contenteditable from true to 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>
由於您有 5 個帶有contenteditable
元素,請嘗試為它們提供 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);
要使用“contenteditable=true”對每個元素執行此操作,您可以簡單地嘗試以下操作:
var editableElements = document.querySelectorAll("[contenteditable=true]");
for (var i = 0; i < editableElements.length; ++i) {
editableElements[i].setAttribute("contentEditable", false);
}
這適用於所有瀏覽器
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");
明,
您可以使用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');
});
});
而已 !!!
用 vanilla js 做一行
document.querySelectorAll("[contenteditable=true]").forEach(el => el.setAttribute("contentEditable", false))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.