如何知道删除密钥关闭的确切段落？

假设我们有如下的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 
    } 
}

问：在“如果”的方法的onkeydown，我怎样才能得到确切的段落，这是用户试图删除（通过按下删除键）？

来源

2016-08-05 Jinny Song

它也将取决于你放置删除按钮的位置 – Sherlock

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

你希望在你的例子是帕拉姆e 您可以标识要传递的事件是什么段落集中使用e.target对象

更新：

至于什么derek说，divs不能听按键事件，除非你把content editable设置为true。

对于这项工作，除去父母div的CONTENTEDITABLE并将此属性设置在每个孩子的

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

<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>

来源

2016-08-05 03:24:02 Sherlock

这仍然会返回包含'contenteditable =“true”' –

@DerekStory的'.my_content'，它取决于焦点字段 – Sherlock

它不会。对于不包含'contenteditable =“true”''的'div'，没有焦点字段。使用当前的例子（使用空格键） - http://codepen.io/anon/pen/kXAowA?editors=1010#0 –

你可以做线沿线的东西：

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

Codepen Example（使用空格键例如）

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

来源

2016-08-05 03:56:02

这个工程！非常感谢您回答我的问题。然而，我试图不使用getSelection，因为它不是一个标准，而且有太多不同的方法来取决于浏览器。我希望如果可能，我可以换一种方式 –

感谢您的更正。我将编辑它 –

您可能需要更强大的功能来获取光标位置。或者将'contenteditable =“true”'应用于单个'.my_paragraph' divs，但我有一种不希望的感觉。 –

如何知道删除密钥关闭的确切段落？

回答

相关问题