使用 JS 檢查 HTML 元素是否可編輯

Question

使用 JS，我們如何判斷是否可以輸入 html 元素。 我正在嘗試將“.tagName”與“INPUT”或“TEXTAREA”進行比較，但它無法區分常規輸入文本/電子郵件元素和單選按鈕或提交按鈕。

我也嘗試過“.isContentEditable”，但是當元素是“繼承的”時，我無法區分。

Answer 1

對於輸入和文本區域，請檢查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" 。

Answer 2

使用只讀屬性。

來自http://www.w3schools.com/jsref/prop_text_readonly.asp ：

document.getElementById("myText").readOnly = true;

Answer 3

這是一個 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;
}

Answer 4

@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;
}