Question

我正在开发一个处理文字选择的Chrome扩展程序。我想检测所选文本是否可编辑。给定Selection返回的getSelection()对象，是否可以检查所选文本是否可编辑？怎么样？

Answer 1

选择可以包含来自多个元素的文本。有些元素可能是可编辑的，有些可能不是。

但是，如果您只对选择开始的元素感兴趣，可以使用

Selection.prototype.anchorNode，返回选择开始的Node。
Node.prototype.parentNode，应该是选择开始的Element。最新的浏览器也支持Node.prototype.parentElement。
HTMLElement.prototype.isContentEditable，如果元素的内容可编辑，则只读属性返回true的布尔值;否则返回false。

那是：

getSelection().anchorNode.parentNode.isContentEditable

但是，这不适用于input和textarea元素，因为：

getSelection()不会返回其中的选择，因为它们的值不作为文本节点存在。您可以改为使用document.activeElement。
isContentEditable将不适用，因为您修改了其值而不是其内容。相反，您应检查它们是disabled还是readOnly（disabled似乎不可选，但您可以查看以防万一。）

function isEditable() {
    var el = document.activeElement; // focused element
    if(el && ~['input','textarea'].indexOf(el.tagName.toLowerCase())
        return !el.readOnly && !el.disabled;
    el = getSelection().anchorNode; // selected node
    if(!el) return undefined; // no selected node
    el = el.parentNode; // selected element
    return el.isContentEditable;
}

var el;
function isEditable() {
  if(el) el.className = '';
  el = document.activeElement; // focused element
  if(el && ~['input','textarea'].indexOf(el.tagName.toLowerCase())) {
    el.className = 'selected';
    return !el.readOnly && !el.disabled;
  }
  el = getSelection().anchorNode; // selected node
  if(!el) return undefined; // no selected node
  el = el.parentNode; // selected element
  el.className = 'selected';
  return el.isContentEditable;
}

var res = document.getElementById('result');
setInterval(function() {
  res.textContent = isEditable();
}, 200);

#result {
  font-size: 200%;
  font-weight: bold;
}
.selected {
  outline: 3px solid red;
}

<div>Non-editable div</div>
<div contentEditable="true">Editable div</div>
<input value="Editable input" />
<input value="Read-only input" readonly />
<input value="Disabled input" disabled />
<textarea>Editable textarea</textarea>
<textarea readonly>Read-only textarea</textarea>
<textarea disabled>Disabled textarea</textarea>

<hr />

<p>Is editable: <span id="result"></span></p>

Answer 2

输入标签具有属性readonly，用于判断是否可以编辑输入。

您可以尝试：

if(yourInput.readonly == true) { // where yourInput is the input tag
    // can not be edited
} else {
    // can be edited
}

你可以修改它以适应你正在使用的东西。

如何检查所选文本是否可编辑？

2 个答案: