使用contenteditable实现输入框插入内容

最新推荐文章于 2024-06-23 09:35:46 发布

peak_chan

最新推荐文章于 2024-06-23 09:35:46 发布

阅读量367

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_49455560/article/details/133921114

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="edit" contenteditable="true" oninput="onChange()" onclick="onEdit()"></div>

    <!-- 要使用button,不然会失去焦点 -->
    <button onclick="onAdd()">添加变量</button>
    <button onclick="onGet()">添加变量</button>
  </body>
  <script>
    function onEdit() {
      getSelection().getRangeAt(0)
      console.log(getSelection())
      console.log(12121)
    }

    function onChange(e) {
      console.log(e)
    }

    function onGet() {
      var edit = document.getElementById('edit')

      console.log(edit.innerText)
    }

    function onAdd() {
      var edit = document.getElementById('edit')

      insertCont(edit, '【车牌号码】')
    }

    /*
     * el   编辑框元素
     * html 要插入的内容，可以是 html 代码
     */
    function insertCont(el, html) {
      el.focus()
      if (document.selection) {
        //IE 10,9,8,7
        document.selection.createRange().pasteHTML(html)
      } else if (window.getSelection) {
        var sel = window.getSelection()
        console.log(sel)
        if (sel.getRangeAt && sel.rangeCount) {
          var range = sel.getRangeAt(0)
          range.deleteContents()
          var div = document.createElement('div')
          div.innerHTML = html
          var frag = document.createDocumentFragment(),
            node,
            lastNode

          console.log(node)
          console.log(lastNode)
          console.log(div.firstChild)
          console.log(range)
          while ((node = div.firstChild)) {
            lastNode = frag.appendChild(node)
          }
          range.insertNode(frag)
          if (lastNode) {
            range = range.cloneRange()
            range.setStartAfter(lastNode)
            range.collapse(true)
            sel.removeAllRanges()
            sel.addRange(range)
          }
        }
      }
    }
  </script>
</html>