Question

假设我们有一个类似下面的HTML。

<div class="my_content" contenteditable="true">
    <div class="my_paragraph"><span style="color:red;">RED</span><span style="color:green;">GREEN</span></div>
    <div class="my_paragraph"><span style="font-size:1em">1EM-TEXT</span><div>
    <div class="my_paragraph"><span style="font-size:2em">2EM-TEXT</span><div>
</div>

我有一个像下面这样的Backbone查看器。

 events: {
    "keydown .my_paragraph" :"onKeyDown"
 },

 onKeyDown : function(e) {
     if(e.keyCode === 46) { //delete key
     }
 }

Q值。在onKeyDown方法的'if'中，如何获取用户尝试删除的确切段落（按删除键）？

Answer 1

onKeyDown : function(e) {
     if(e.keyCode === 46) { //delete key
     }
 }

您希望在您的示例中传递一个事件，即参数e 您可以使用e.target object

来确定哪个段落是焦点

更新：

正如derek所说，除非你将内容编辑为真，否则div不能听按键事件。

要使其正常工作，请删除父div的满足，并在每个子项中设置此属性

＆＃13;

$(function(){
  $('.my_paragraph').on('keydown', function(e){
       console.log(e.target);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_content">
    <div class="my_paragraph first" contenteditable="true"><span style="color:red;">RED</span>"><span style="color:green;">GREEN</span></div>
    <div class="my_paragraph second" contenteditable="true"><span style="font-size:1em">1EM-TEXT</span></div>
    <div class="my_paragraph third" contenteditable="true"><span style="font-size:2em">2EM-TEXT</span></div>
</div>

＆＃13;

Answer 2

您可以采取以下措施：

var cursorTarget = getSelection().getRangeAt(0).commonAncestorContainer.parentNode;
var targetParagraph = $('.my_paragraph').has(cursorTarget);
targetParagraph.addClass('target-paragraph'); // Or whatever you want

Codepen Example（例如，使用空格键）

同样重要：您的HTML无效。您没有在最后两个</div> div中正确使用结束.my_paragraph标记，并且在关闭第一个">后还有一个span。

如何知道删除键已关闭的确切段落？

2 个答案: