数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何在 HTML 中使用 contenteditable div 创建自定义插入点？
本文将介绍如何在 HTML 中使用 **contenteditable** div 创建自定义插入点。让我们深入了解如何在 HTML 中使用 **contenteditable** div 创建自定义插入点。
HTML 中的 contenteditable div
**contenteditable** 全局属性是一个枚举属性，它指定元素是否应该可由用户编辑。在这种情况下，浏览器会更改其窗口小部件以启用编辑。
语法
以下是 **contenteditable** 的语法：
<element contenteditable="true|false">
为了更好地理解如何在 HTML 中使用 **contenteditable div** 创建自定义插入点，让我们来看以下示例
示例
在下面的示例中，我们运行一个脚本来使用 **contenteditable div** 创建自定义插入点。
<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3 ">
<div id="editable" contenteditable="true">
Welcome <br>To The <br>TutorialsPoint
</div>
<button id="button" onclick="insertionpoint()">Click</button>
<script>
function insertionpoint() {
var tutorial = document.getElementById("editable")
var range = document.createRange()
var select= window.getSelection()
range.setStart(tutorial.childNodes[2], 5)
range.collapse(true)
select.removeAllRanges()
select.addRange(range) 5. How Do You Make A Custom Insertion Point With a Contenteditable Div In HTML
}
</script>
</body>
</html>
脚本执行后，它将在网页上生成包含文本和点击按钮的输出。当用户点击按钮时，文本将获得焦点，允许用户插入或更改文本。
示例
请考虑以下示例，我们在此运行脚本以使用 **contenteditable** div 创建自定义插入点。
<!DOCTYPE html>
<html>
<body style="background-color:#D6EAF8 ">
<div class="element" contenteditable="true">MSD</div>
<p class="element" contenteditable="true">Virat Kohli</p>
<script>
document.addEventListener('keydown', event => {
if (event.key === 'Enter') {
document.execCommand('insertLineBreak')
event.preventDefault()
}
})
</script>
</body>
</html>
运行上述脚本后，将弹出输出窗口，在网页上显示文本。当用户点击文本时，它将获得焦点，并允许用户进行更改。
示例
执行以下简单代码，观察我们如何使用 **contenteditable** div 创建自定义插入点。
<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF ">
<style>
div.tutorial {
margin: 30px;
}
div.display {
display:inline-block;
background-color: #ABEBC6 ;
color: black;
width: 300px;
}
div.container {
-webkit-user-select: none;
}
.invisible {
visibility: hidden;
}
</style>
<div class="tutorial">
<div class="container">
<span class="invisible"></span><div class="display" contenteditable="true">
MSD
</div>
<div class="display" contenteditable="true">
MAHI
</div>
</div>
<div class="unrelated">Mahendra Singh Dhoni is an Indian former<br>
international cricketer who was captain of the Indian national cricket team
</div>
</div>
</body>
</html>
脚本执行后，它将生成文本以及在网页上以绿色显示的可编辑文本。当用户点击文本时，它允许用户插入或更改文本。
更新于：2023年4月20日
354 次浏览
广告