添加删除留言板

  1. textarea在一行，要不然光标不是定格
  2. outline: none;
  3. onkeydown 检测输入
  4. event.keyCode == 13 == (enter)
  5. event.ctrlKey == ctrl
  6. if (e.ctrlKey && e.keyCode == 13) 检测两个键位同时输入
<!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>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    textarea {
      resize: none;
      width: 400px;
      height: 100px;
      outline: none;
      font-size: 20px;
    }

    textarea::placeholder {
      color: darkblue;
      text-align: center;
      line-height: 99px;
      overflow: hidden;
    }

    .box {
      width: 400px;
      margin: 30px auto;
    }

    ul li {
      list-style: none;
      background-color: cornsilk;
      margin-bottom: 15px;
    }

    ul li a {
      text-decoration: none;
      float: right;
    }
  </style>
</head>

<body>


  <div class="box">
    <textarea name="" id="des" placeholder="ctrl+enter输入"></textarea>
    <ul>
      <li>这么辣了 <a href="javascript:;" class='a1'>删除</a></li>
    </ul>
  </div>
  <script>
    deleteLi()

    var cu = document.getElementById("des")
    var ul = document.querySelector("ul");

    cu.onkeydown = function (e) {
      if (e.ctrlKey && e.keyCode == 13) {

        if (cu.value != "") {
          var li = document.createElement("li");
          li.innerHTML = cu.value + "<a href='javascript:;' class='a1'>删除</a>"
          ul.insertBefore(li, ul.children[0])
          cu.value = ""

          deleteLi()
        } else {
          alert("没有输入内容")
        }
      }
    }

    function deleteLi() {
      var a1 = document.querySelectorAll(".a1");
      var ul = document.querySelector("ul");
      for (var i = 0; i < a1.length; i++) {
        a1[i].onclick = function () {
          this.parentNode.parentNode.removeChild(this.parentNode)
        }
      }
    }
  </script>
</body>

</html>
posted @ 2021-06-04 09:41  fk11  阅读(58)  评论(0)    收藏  举报