检查对象是否为文本框 - JavaScript

Question

我知道我们可以使用JavaScript。

if (typeof textbox === "object") { } 

但是是否有方法可以确保该对象是文本框？

- simplified.

---

你所说的 "textbox" 是指什么？是指 "textarea"、"input" 还是其他的东西？ - Naftali

Answer 1

var isInputText = obj instanceof HTMLInputElement && obj.type == 'text';

- Mick Owen

---

警告：如果您的应用程序是那些使用跨窗口DOM检查（或类似）的多个窗口之一，则window.HTMLInputElement === otherWindow.HTMLInputElement将为false，因此instanceof运算符也可能意外返回false。同样适用于iframe和弹出窗口。在这些情况下，检查tagName可以起作用，就像其他答案已经提到的那样。 - John Weisz

Answer 2

截至2016年，请使用以下内容：

function isTextBox(element) {
    var tagName = element.tagName.toLowerCase();
    if (tagName === 'textarea') return true;
    if (tagName !== 'input') return false;
    var type = element.getAttribute('type').toLowerCase(),
        // if any of these input types is not supported by a browser, it will behave as input type text.
        inputTypes = ['text', 'password', 'number', 'email', 'tel', 'url', 'search', 'date', 'datetime', 'datetime-local', 'time', 'month', 'week']
    return inputTypes.indexOf(type) >= 0;
}

- Onur Yıldırım

---

inputTypes 应该包括 'tel'。 - Shaun Lebron

谢谢@ShaunLeBron。已添加。 - Onur Yıldırım

请确保以下内容为真：element.isContentEditable。 - Poul Kruijt

element.isContentEditable 对于可编辑的输入框可能为 false，因此不要依赖它为 true。readonly 属性也可能是相关的。 - Tamzin Blake

我在代码中看到一个错误inputTypes.contains is not a function，代码看起来像是一个修改过的版本，包括完全相同的注释。在GitHub上找不到这段代码，也找不到在我的机器上的任何地方。最后发现这是来自RoboForm密码管理器。在GitHub上还有多个仓库有着完全相同的注释。所有的版本都有不同程度的修改...这太疯狂了。 - undefined

Answer 3

你是否正在寻找像这样的东西？

if(textbox.tagName && textbox.tagName.toLowerCase() == "textarea") {
    alert('this is a textarea');
}

如果你需要判断是否为文本输入框，可以这样做：

if(textbox.tagName && textbox.tagName.toLowerCase() == "input" && textbox.type.toLowerCase() == "text") {
    alert('this is a text input');
}

- Jordan

---

@Sime：有时候这取决于浏览器以及它是否在HTML或XHTML中。我会更新我的答案以确保它能够正常工作。 - Jordan

@Sime：http://reference.sitepoint.com/javascript/Element/tagName。Opera返回的是它输入的方式，HTML是大写的，XHTML保留原样。 - Jordan

@Jordan 是的：“在 HTML 中，这是以全大写返回的…” - Šime Vidas

@Sime，没错，如果文档是XHTML格式，就不能保证。 - Jordan

@Jordan（1）XHTML文档具有“text / html” MIME类型，因此浏览器将它们视为HTML文档而不是XML文档。（2）这个Opera-thing仅适用于命名空间元素（自定义元素类型）。 - Šime Vidas

Answer 4

如果你需要文本输入框：

if (textbox.tagName == "input" && textbox.getAttribute("type") == "text") {
   // it's a text input
}

如果您正在寻找一个文本区域，请使用标签。</br><div class="h-2"></div><pre class="guess-Groovy"><code>if (textbox.tagName == "textarea") { // it's a textarea } </code></pre>

- Michael Berkowski

Answer 5

if(textbox instanceof HTMLInputElement && textbox.getAttribute("type") == "text") {
    alert("I'm an input text element");
}

- vrunoa

Answer 6

我认为你可能想要获取一个元素的引用，然后检查 .type 的返回值，即

var element = document.getElementById('element_in_question');
if(element.type == "textarea"){
  console.log('I must be textarea');
}

- thescientist

---

这完全是错误的答案。无论元素的类型是什么，element.type 都会返回 undefined。 - angry kiwi

抱歉，但 evt.target.type 给我的是“text”。 - Polv