可输入的块元素（div p）的设置以及光标移动到最后的处理

最新推荐文章于 2024-12-07 17:19:15 发布

Alice_LMY

最新推荐文章于 2024-12-07 17:19:15 发布

阅读量998

点赞数

分类专栏：记录文章标签： javascript 开发语言 ecmascript

原文链接：https://www.jianshu.com/p/f35fdb013c6f

版权

记录专栏收录该内容

26 篇文章 0 订阅

订阅专栏

点击父元素box1，子元素box2获取焦点，且光标自动移动到文本内容最后的位置

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>Document</title>
    <style>
      .box1 {
        background-color: aqua;
        width: 500px;
        height: 500px;
      }
      .box2 {
        width: 100%;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2" contenteditable="true"></div>
    </div>
    <script>
      document.querySelector(".box1").onclick = function (e) {
        let box2 = document.querySelector(".box2");
        box2.focus();
        if (window.getSelection) {
          //ie11 10 9 ff safari
          var range = window.getSelection(); //创建range
          range.selectAllChildren(box2); //range 选择box2下所有子内容
          range.collapseToEnd(); //光标移至最后
        } else if (document.selection) {
          //ie10 9 8 7 6 5
          var range = document.selection.createRange(); //创建选择对象
          range.moveToElementText(obj); //range定位到obj
          range.collapse(false); //光标移至最后
          range.select();
        }
      };
    </script>
  </body>
</html>