Question

每次尝试时都会给我一个p标记，即使父母应该是span

var sel = window.getSelection();
console.log(sel.getRangeAt(0));

是否有任何解决方案或方法可以做到这一点或获得一些有用信息的链接怎么做？

Answer 1

使用range属性startContainer，endContainer和commonAncestorContainer来确定包含元素的选择。在以下示例中，选择文本＆＃34; bbb＆＃34;然后按下按钮＆＃34;按我＆＃34;。 commonAncestorContainer符合预期的span元素：

＆＃13;

$('#pressme').click(function(){
  var rng = window.getSelection().getRangeAt(0);
  alert(rng.commonAncestorContainer.parentNode.tagName);
});

＆＃13;

#editor {
  width: 500px;
  height: 400px;
  padding: 4px;
  border: solid 1px gray;
  margin-bottom: 4px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='editor' contenteditable='true'>aaa <span style="color:red">bbb</span> ccc</div>
<input id='pressme' type='button' value='press me' />

＆＃13;

尝试选择文本的各个部分，看看它如何改变结果。

如何获得div元素中标记文本的父元素是否具有contenteditable？

1 个答案: