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

How to check if the selected text is editable?

本文关键字：文本 是否 编辑 何检查 检查      更新时间：2023-09-26

我正在开发一个处理文本选择的Chrome扩展程序。我想检测所选文本是否可编辑。给定 getSelection（） 返回的 Select 对象，是否可以检查所选文本是否可编辑？如何？

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

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

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

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

您可以尝试：

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

您可以对其进行修补以适合您正在使用的内容。

相关文章：