check if object is a textbox - javascript

Question

I understand that we can use (javascript)

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

but are there methods which will allow me to ensure that the object is a textbox?

What do you mean `textbox`? `textarea`, `input`...? – Naftali Jun 22 '11 at 18:51 — Naftali, Jun 22 '11 at 18:51

score 44 · Answer 1 · edited Oct 11 '16 at 15:34

44

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

edited Oct 11 '16 at 15:34

Vikash Pandey

5,407
6
41
42

answered May 12 '13 at 13:52

Mick Owen

649
6
8

1

A word of warning: if your app is one of those rare ones that use multiple windows with cross-window DOM inspection (or similar), `window.HTMLInputElement === otherWindow.HTMLInputElement` will be false, thus the `instanceof` operator may also unexpectedly return false. Applies to iframes and popup windows as well. In those cases, checking `tagName` can work, as other answers already mentioned. – John Weisz Nov 16 '20 at 12:59

Onur Yıldırım · Answer 2 · 2016-10-05T19:32:59.083

26

As of 2016, use this:

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

edited Oct 05 '16 at 19:32

answered Aug 05 '16 at 18:43

Onur Yıldırım

32,327
12
84
98

2

inputTypes should also include `'tel'` – Shaun Lebron Oct 05 '16 at 16:18
Thanks @ShaunLeBron. Added. – Onur Yıldırım Oct 05 '16 at 19:33
2

Also make sure this is true: `element.isContentEditable` – Poul Kruijt Sep 26 '17 at 09:31
`element.isContentEditable` can be false for editable inputs, so don't rely on that being true. the `readonly` attribute may also be relevant. – Tamzin Blake May 12 '20 at 18:32

Jordan · Answer 3 · 2011-06-22T19:01:56.730

12

Are you looking for something like this?

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

If you need to know if it's a text input, you can do this:

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

edited Jun 22 '11 at 19:01

answered Jun 22 '11 at 18:53

Jordan

31,971
6
56
67

@Sime: sometimes, it depends on the browser and whether it's in HTML or XHTML. I'll update my answer to make sure it works. – Jordan Jun 22 '11 at 19:01
@Sime: http://reference.sitepoint.com/javascript/Element/tagName. Opera returns it how it was typed, HTML is uppercase, XHTML is preserved. – Jordan Jun 22 '11 at 19:03
@Jordan Yes: *"In HTML this is returned in all uppercase..."* – Šime Vidas Jun 22 '11 at 19:04
@Sime, right, so if the document is XHTML, it's not guaranteed. – Jordan Jun 22 '11 at 19:05
Either way I edited my answer so that it takes all of that into account, regardless of doctype and browser. – Jordan Jun 22 '11 at 19:06
@Jordan (1) XHTML documents have the "text/html" mime-type, so browsers treat them as HTML documents, not XML documents. (2) This Opera-thing is only for namespaced elements (custom element types). – Šime Vidas Jun 22 '11 at 19:09
@Šime Vidas - If you deliver your XHTML as "application/xhtml+xml" it is supposed to be treated differently, noting that not all browsers actually support that. (Though in my view XHTML is a waste of time if you're just going to deliver it as "text/html".) – nnnnnn Jun 23 '11 at 00:16
@nnn Yes, but in IRL XHTML documents delivered as "application/xhtml-xml" don't exist (at least I haven't heard of any prominent web-server doing it), since IE doesn't have a XML parser. All web-pages on the web are "text/html", ergo, `tagName` will always be uppercase. – Šime Vidas Jun 23 '11 at 00:49

Michael Berkowski · Answer 4 · 2014-02-18T14:59:40.330

3

If it's a text input you're looking for:

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

If you're looking for a textarea

if (textbox.tagName == "textarea") {
  // it's a textarea
}

edited Feb 18 '14 at 14:59

answered Jun 22 '11 at 18:54

Michael Berkowski

267,341
46
444
390

score 2 · Answer 5 · edited Oct 11 '16 at 14:41

2

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

edited Oct 11 '16 at 14:41

Jed Fox

2,979
5
28
38

answered Oct 31 '13 at 17:21

vrunoa

766
8
15

score 1 · Answer 6 · answered Jun 22 '11 at 18:53

1

I think perhaps you would want to get a reference to an element, and then check for the return value of .type i.e.

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

answered Jun 22 '11 at 18:53

thescientist

2,906
1
20
15

1

this is completely wrong answer. element.type will give undefined no matter what type of element. – angry kiwi Mar 15 '17 at 10:19
Sorry, but `evt.target.type` gives me "text". – Polv Aug 09 '19 at 13:45

check if object is a textbox - javascript

6 Answers6

Linked