如何使用 JavaScript 创建可编辑 div?
javascriptweb developmentfront end technology
您将在本文中学习如何使用 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 源代码 − 必须将以下 JavaScript 代码添加到 myApp.js 文件中，如下所示。
// 添加新元素
let divEditing = document.createElement('div');
// 将文本添加到创建的元素
let value = localStorage.getItem('text');
let text;
if (value == null){
text = document.createTextNode
('您可以通过单击它来编辑此 Div');
}
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;');
// 主容器可访问
let container = document.querySelector('.container');
// 插入 ID = myFirstDiv 的元素
container.insertBefore(divEditing, myFirstDiv);
// 事件监听器已添加到 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>`;
}
// 监听 textarea 的 blur 事件
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">
// 添加新元素
let divEditing = document.createElement('div');
// 将文本添加到创建的元素中
let value = localStorage.getItem('text');
let text;
if (value == null) {
text = document.createTextNode('您可以通过单击它来编辑此 Div');
} 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;');
// 主容器可访问
let container = document.querySelector('.container');
// 插入 ID = myFirstDiv 的元素
container.insertBefore(divEditing, myFirstDiv);
// 事件监听器已添加到 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>`;
}
// 监听 textarea 的 blur 事件
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 属性的 <div> 和一个 Button 元素，在这种情况下，单击按钮时会调用 addRemoveAttr() 函数。
执行该函数时，它会检查 <div id='myText> 上的 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>
在单击"单击此处"按钮之前，您将看到此输出。
在单击"单击此处"按钮并输入您选择的文本后，您将看到此输出。
