在可编辑div中检测动态创建的跨度上的退格

时间:2018-05-19 10:01:13

标签: javascript jquery

我有可编辑的div,其中有一个动态创建的范围。我想在触发退格后删除整个span元素。到目前为止,我所做的是在jsfiddle链接下面,退格检测不起作用。

https://jsfiddle.net/mt15199/Lp4s6c4c/3/

HTML

caches.match(evt.request,{cacheName:CACHE,ignoreVary:true}).then(function(response) {

JQUERY CODE

<div id="input" contenteditable><span id="var" style="border: 1px solid gray; background-color: yellow;">var:purchase_price</span> I look like an input span</div>

1 个答案:

答案 0 :(得分:4)

您可以使用window.getSelection().anchorNode.parentNode.tagName获取已更改的标记名称,如果是span元素,则将其删除。

alert("ready!");

$(document).on('keydown', '#input', function(e) {
  var key = event.keyCode || event.charCode;

  if( key == 8 || key == 46 ) {
    if(window.getSelection().anchorNode.parentNode.tagName ==='SPAN'){
      window.getSelection().anchorNode.parentNode.remove();
    }
    alert("backspace detected!");
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input" contenteditable><span id="var" style="border: 1px solid gray; background-color: yellow;" contenteditable>var:purchase_price</span> I look like an input span</div>