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

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;