发布于 293 次浏览

实现输入框@人名功能

<!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>
      .label {
        display: inline-block;
        border: solid 1px #ccc;
        padding: 10px 20px;
      }
      .output {
        padding: 20px;
        margin: 20px 0;
        width: 400px;
      }

      #myInput {
        width: 400px;
        border: solid 1px #ccc;
        padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <div class="output" id="myOutput"></div>
    <div contenteditable="plaintext-only" id="myInput"></div>
    <div><button id="myButton">submit</button></div>
    <div class="label" contenteditable="false" data-name="张三">@张三</div>
    <div class="label" contenteditable="false" data-name="李四">@李四</div>
    <div class="label" contenteditable="false" data-name="王五">@王五</div>
    <script>
      let inputEl = document.getElementById("myInput")
      let outputEl = document.getElementById("myOutput")
      let buttonEl = document.getElementById("myButton")
      let labelsEl = document.querySelectorAll(".label")

      buttonEl.addEventListener("click", (e) => {
        let liEl = document.createElement("div")
        liEl.innerText = inputEl.innerText
        outputEl.appendChild(liEl)
      })
      labelsEl.forEach((m) => {
        m.addEventListener("click", function (e) {
          console.log(this.dataset)
          let spanEl = document.createElement("span")
          spanEl.innerHTML = "@" + this.dataset.name + " "
          spanEl.style = "color:blue"
          spanEl.contentEditable = "false"
          inputEl.appendChild(spanEl)
        })
      })
    </script>
  </body>
</html>