使用JS检查HTML元素是否可编辑

Check whether an HTML element is editable or not using JS

本文关键字：是否 编辑 元素 HTML JS 检查 使用      更新时间：2023-09-26

使用JS，我们如何找到是否可以键入html元素。我尝试将".tagName"与"INPUT"或"TEXTAREA"进行比较，但它无法区分常规输入文本/电子邮件元素和单选按钮或提交按钮。

我也尝试过使用".isContentEditable"，但当元素是"继承的"时，我无法区分。

对于输入和文本区域，请检查tagName和type，不要忘记更新的HTML5输入类型，如email。以下是我的代码片段，用于在一个名为el:的变量中存储的元素上测试这一点

var nodeName = el.nodeName.toLowerCase();
if (el.nodeType == 1 && (nodeName == "textarea" ||
    (nodeName == "input" && /^(?:text|email|number|search|tel|url|password)$/i.test(el.type)))) {
    // Do stuff
}

对于其他元素，isContentEditable属性在所有情况下都有效，并且应该只返回布尔值，而不是像"inherit"这样的字符串。

最后，有可能使用document.designMode属性使整个文档可编辑，在这种情况下，document.designMode将具有字符串值"on"。

这是一个typescript版本。

function isEditableElement(el: EventTarget) {
  if (el instanceof HTMLElement && el.isContentEditable) return true;
  if (el instanceof HTMLInputElement) {
    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
    if (/|text|email|number|password|search|tel|url/.test(el.type || '')) {
      return !(el.disabled || el.readOnly);
    }
  }
  if (el instanceof HTMLTextAreaElement) return !(el.disabled || el.readOnly);
  return false;
}

@percy507有一个打字错误。if (/|text|email|numb->if (/text|email|numb

function isEditableElement(el: EventTarget) {
  if (el instanceof HTMLElement && el.isContentEditable) return true;
  if (el instanceof HTMLInputElement) {
    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
    if (/text|email|number|password|search|tel|url/.test(el.type || '')) {
      return !(el.disabled || el.readOnly);
    }
  }
  if (el instanceof HTMLTextAreaElement) return !(el.disabled || el.readOnly);
  return false;
}

使用只读属性。

发件人http://www.w3schools.com/jsref/prop_text_readonly.asp：

document.getElementById("myText").readOnly = true;
相关文章：