检查一个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;