資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用JavaScript建立可編輯的div？
你將在這篇文章中學習如何使用HTML、CSS和JavaScript開發一個可編輯的div。每當你點選一個可編輯的div時，你的瀏覽器會自動建立一個可編輯的文字區域，你可以在其中更改或新增新文字。在你完成編輯後點擊瀏覽器其他地方，你編輯的文字將顯示為靜態文字。
必要條件 − 你應該熟悉HTML、CSS和JavaScript的概念。
開發結構 − 建立兩個檔案：一個用於JavaScript，另一個用於HTML。執行以下命令來建立這些檔案。
語法
$ touch index.html app.js
index.html 原始碼 − 你需要在檔案中新增以下程式碼，如下所示。
<h1 style="color: rgb(12, 139, 185); text-align: center;"> Let us understand to create Editable Div with TutorialsPoint </h1> <div style="text-align: center; margin-left: 35%;" class="container"> <div id="myFirstDiv"></div> </div>
CSS 原始碼 − 你需要在HTML檔案中新增以下程式碼，如下所示。
body{
background-color: #b9b9b0;
}
textarea {
background-color: #e0e1a3;
}
myApp.js 原始碼 − 你需要在myApp.js檔案中新增以下JavaScript程式碼，如下所示。
// adding a new element
let divEditing = document.createElement('div');
// text is added to that created element
let value = localStorage.getItem('text');
let text;
if (value == null){
text = document.createTextNode
('You can edit this Div by clicking on it');
}
else{
text = document.createTextNode(value);
}
divEditing.appendChild(text);
divEditing.setAttribute('id', 'myElem');
divEditing.setAttribute('class', 'myElem');
divEditing.setAttribute('style','font-size:50px;border:2px
solid;width:380px;height:210px;background-color: #80f3e1;');
// the main container is accessible
let container = document.querySelector('.container');
// the element with the ID = myFirstDiv is being inserted
container.insertBefore(divEditing, myFirstDiv);
// event listener is added to the divElem
divEditing.addEventListener('click',function (){
let lengthOfTextAreas =
document.getElementsByClassName('textarea').length;
if(lengthOfTextAreas == 0){
let html = myElem.innerHTML;
divEditing.innerHTML =
`<textarea class="textarea form-control"
id="textarea" rows="3">
${html}</textarea>`;
}
// listening the textarea's blur event
let textarea = document.getElementById('textarea');
textarea.addEventListener('blur',function() {
myElem.innerHTML = textarea.value;
localStorage.setItem(
'text', textarea.value);
})
});
示例1
最終結果 − 這是組合上面提到的HTML、CSS和JavaScript程式碼的結果。
<!DOCTYPE html>
<html>
<title>How to create editable div using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #b9b9b0;
}
textarea {
background-color: #e0e1a3;
}
</style>
</head>
<body>
<h1 style="color: rgb(12, 139, 185); text-align: center;">
Let us understand to create Editable Div with TutorialsPoint
</h1>
<div style="text-align: center; margin-left: 35%;" class="container">
<div id="myFirstDiv"></div>
</div>
</body>
<script src="myApp.js">
// adding a new element
let divEditing = document.createElement('div');
// text is added to that created element
let value = localStorage.getItem('text');
let text;
if (value == null) {
text = document.createTextNode('You can edit this Div by clicking on it');
} else {
text = document.createTextNode(value);
}
divEditing.appendChild(text);
divEditing.setAttribute('id', 'myElem');
divEditing.setAttribute('class', 'myElem');
divEditing.setAttribute('style', 'font-size:50px;border:2px
solid; width: 380 px; height: 210 px; background - color: #80f3e1;');
// the main container is accessible
let container = document.querySelector('.container');
// the element with the ID = myFirstDiv is being inserted
container.insertBefore(divEditing, myFirstDiv);
// event listener is added to the divElem
divEditing.addEventListener('click', function() {
let lengthOfTextAreas =
document.getElementsByClassName('textarea').length;
if (lengthOfTextAreas == 0) {
let html = myElem.innerHTML;
divEditing.innerHTML =
`<textarea class="textarea form-control"
id="textarea" rows="3">
${html}</textarea>`;
}
// listening the textarea's blur event
let textarea = document.getElementById('textarea');
textarea.addEventListener('blur', function() {
myElem.innerHTML = textarea.value;
localStorage.setItem(
'text', textarea.value);
})
});
</script>
</body>
</html>
輸出
以上程式碼將產生以下輸出 −
點選Div區域之前，你會看到以下輸出。
接下來，點選Div區域後，輸入你選擇的文字，你會看到以下輸出。
最後，輸入你選擇的文字後，點選div元素外部，你會看到以下輸出。
示例2
在這種情況下，建立了一個沒有`contentEditable`屬性的`
`和一個按鈕元素，在點選按鈕時呼叫`addRemoveAttr()`函式。
執行該函式時，它會檢查`
`上`contentEditable`屬性的值是否可繼承或為false，然後將`contentEditable`屬性的值設定為true。
document.getElementById('txt1').contentEditable = true;
如果不是，則將其設定為false。
document.getElementById('txt1').contentEditable = false;
要啟用或停用“div”上的編輯功能，請點選按鈕，你將得到以下結果。
<!DOCTYPE html>
<html>
<title>How to create editable div using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#myText {
background-color: #dfded6;
width: max-content;
text-align: center !important;
border: solid black 2px;
margin-left: 43%;
}
</style>
</head>
<body>
<body style="text-align:center">
<h1 style="color: rgb(12, 139, 185); text-align: center;">
Click the button to enable or disable the Div Element to enter the text.
</h1>
<div class='editable' id='myText'>
<h4>Click Me To Modify the text.</h4>
</div><br>
<input button type="button" class="btn btn-success" id='but_enable' value='Click Here' onclick='addRemoveAttr();'>
<script type='text/javascript'>
function addRemoveAttr() {
let contenteditable = document.getElementById('myText').contentEditable;
if (contenteditable == 'inherit' || contenteditable == 'false') {
document.getElementById('myText').contentEditable = true;
} else {
document.getElementById('myText').contentEditable = false;
}
}
</script>
</html>
點選“點選這裡”按鈕之前，你會看到以下輸出。
點選“點選這裡”按鈕並輸入你選擇的文字後，你會看到以下輸出。
更新於：2022年12月9日
瀏覽量：1000+
廣告
© .
All rights reserved.