如何在 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 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告