文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用Jquery单击可编辑的div，然后按键盘上的Delete键来删除它？

问如何使用Jquery单击可编辑的div，然后按键盘上的Delete键来删除它？
EN

Stack Overflow用户

提问于 2018-12-30 03:50:43

回答 3查看 565关注 0票数 2

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

这是我的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>

jquery

html

css

jquery-ui

javascript

回答 3

Stack Overflow用户

发布于 2018-12-30 04:01:45

捕获delete键上的快捷键的最简单方法。

$('#MyFirstDiv').click(function(e){
   e.preventDefault(); 
});
$('#MyFirstDiv').keydown(function(e){
    e.preventDefault();
    if(e.keyCode == 46) {
        this.remove();
    }
});

票数 0

Stack Overflow用户

发布于 2018-12-30 04:17:51

您可以首先创建一个变量：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");
        }
    }
})

票数 0

Stack Overflow用户

发布于 2018-12-30 20:36:46

测试

单击要选择的文本。
按D删除。遗憾的是，删除键在堆栈溢出上不起作用。只需更改if语句中的键代码，即可将键从D改为DELETE

解释

有两个函数可以帮助解决这个问题。

选择：选中所单击的div。

EventListener:Listens，并删除选定的div。

选择函数

选定的

全局变量存储有关选定div的信息。

在select函数中，我们使用currentTarget.id从事件对象‘e’中获取所单击的的id

select函数内的

If语句选择并取消选择div.

EventListener

使用来自按键监听器的事件对象来获取pressed.
e.keyCode提供的密钥。e.which是一种后备方案。对于ie用户
，如果他们的keyCode是100 (D键)，那么使用

变量来获得所选的div并将其css显示改为‘none’。

另外还有一个else语句，当未选择任何内容并按下键时，您可以在其中添加js。

此外，所选类的css用于反馈何时选择div。

以下是代码片段：

let selected;

const select = e => {
    //If already selected, this will deselect the div
    if(selected == e.currentTarget.id) {
      document.getElementById(selected).classList.remove('selected'); //some CSS
      selected = null;
    } else {
       //select this div
      selected = e.currentTarget.id;
      document.getElementById(selected).classList.add('selected'); //some CSS
    }
}

window.addEventListener('keypress', e => {
  //Get key pressed
  let key = e.keyCode || e.which;
  if(selected != undefined) {
      if(key == 100) {//If D is pressed
        let target = document.getElementById(selected); //get the div
        target.style.display = 'none'; //hide div
        console.log('deleted: ' + selected);
      }
  } else {
    //Runs if nothing is selected. Do as you please here.
  }
})

.selected {
  background: black;
  color: white;
}

#DraggableDiv {
  user-select: none;
  cursor: pointer;
  font-family: sans-serif;
  width: 400px;
  text-align: center;
  padding: 10px 5px;
}

<!DOCTYPE html>
<html>

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

</head>

<body>

  <div id="myContainer">
    <div id="MyFirstDiv">
      <div id="DraggableDiv" onclick="select(event)">
        Click me and press D
      </div>
    </div>
  </div>

</body>

</html>