时间戳

首页 > 解决方案 > 如何通过单击可编辑的 div 然后使用 Jquery 按下键盘上的 Delete 键来删除它？

javascript - 如何通过单击可编辑的 div 然后使用 Jquery 按下键盘上的 Delete 键来删除它？

问题描述

我有一个属性 contenteditable = true 的 div。我可以通过双击div来激活div内容编辑，这是因为我的div是可拖动的，所以我使用dooble click事件来激活div编辑。事实是我想通过单击它然后按键盘上的 Delete 键来消除完整的 div。我怎样才能做到这一点？我怎样才能做到当我在div上写东西并按下delete键时，整个div不会被删除？我只想在 div 版本未激活时删除 div，只需单击 div 然后按删除键，瞧，它被删除了。

这是我的 HTML 代码：

$(document).ready(function() {

  $('.draggable').draggable({
    containment: "parent"
  });

  $(".draggable").resizable();

  $('#MyFirstDiv').click(function() {
    //HERE I WANT TO PUT THE CODE TO DELETE THE DIV.
  });

  $("#myContainer").on("dblclick", "#MyFirstDiv", function(e) {
    e.preventDefault();
    $(".draggable").draggable('disable');

    this.querySelector(":scope > :first-child").focus();

  });

  $("#myContainer").on("blur", "#MyFirstDiv", function(e) {
    e.preventDefault();
    $(".draggable").draggable('enable');
  });

});
#myContainer {
  border: 1px solid black;
  height: 400px;
  width: 100%;
}

#DraggableDiv {
  border: 1px solid blue;
}
<!DOCTYPE html>
<html>

<head>
  <title>My Delete Div</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>

  <div id="myContainer">
    <div id="MyFirstDiv">
      <div class="draggable" contenteditable="true" id="DraggableDiv">
        THIS IS MY TEXT INSIDE THE DIV
      </div>
    </div>
  </div>

</body>

</html>

标签： javascriptjqueryhtmlcssjquery-ui

解决方案

您可以首先创建一个变量：divClicked，我存储 div 的单击状态

var divClicked = false;

然后在您的事件侦听器中，更新divClicked（它将是一个切换按钮）：

$("#MyFirstDiv").click(function(e) {
    e.preventDefault();
    divClicked = !divClicked;
}

最后，像这样添加一个删除键事件监听器：

$("#MyFirstDiv").keydown(function(e) {
    e.preventDefault();
    if (e.keyCode == 46) {
        if (divClicked) {
            $(this).remove();
        } else {
            alert("Click the div first then press Delete to remove it");
        }
    }
})

完整代码：

var divClicked = false;

$("#MyFirstDiv").click(function(e) {
    e.preventDefault();
    divClicked = !divClicked;
}

$("#MyFirstDiv").keydown(function(e) {
    e.preventDefault();
    if (e.keyCode == 46) {
        if (divClicked) {
            $(this).remove();
        } else {
            alert("Click the div first then press Delete to remove it");
        }
    }
})

推荐阅读