Check if input is of type "text/number/email/etc"?

Question

I need to check with Javascript (not jQuery) if the given input element is writable by the user using the keyboard.

I'd like to exclude checkboxes, radios, buttons, resets, submits, image and so on.

Is there a simple way to do it without list all the input types?

This is my current code now:

if (element.getAttribute === undefined) {
    return false;
}

var eTag  = element.tagName;
var eType = element.getAttribute('type');
var isTextInput = (eTag === 'INPUT' || eTag === 'TEXTAREA') && ( eType !== null || eType === 'text' || eType === 'password');
var isEnabledInput = element.disabled === false && element.readOnly === false;
var isContentEditable = ( element.contentEditable && element.contentEditable === true );

// stop for enabled text inputs, selects and contentEditable areas
return (isTextInput && isEnabledInput) || eType === 'SELECT' || isContentEditable;

Logically the && ( eType !== null || eType === 'text' || eType === 'password'); is not enough to check them all.

This seems to be the jquery answer stackoverflow.com/questions/5108337/… — djechlin
– djechlin, Commented Nov 25, 2015 at 17:53
@djechlin no with that code you just test if the element is an input (the second example tests if is a input of type = text). It will return false if the input is of type number — Fez Vrasta
– Fez Vrasta, Commented Nov 25, 2015 at 17:54
I wonder why all these downvotes... It's a legitimate question. — Fez Vrasta
– Fez Vrasta, Commented Nov 26, 2015 at 15:59

Fez Vrasta · Accepted Answer · 2024-03-28 16:57:04Z

1

Posting this as an answer because fixes the problem, but it's not strictly what I'm asking for.

I'm still waiting for a cleaner solution.

var notTextual = [
    'button',
    'checkbox',
    'hidden',
    'image',
    'radio',
    'reset',
    'submit'
];

if (element.getAttribute === undefined) {
    return false;
}

var eTag  = element.tagName;
var eType = element.getAttribute('type');
var isTextInput = (eTag === 'INPUT' || eTag === 'TEXTAREA') && !notTextual.contains(eType);
var isEnabledInput = element.disabled === false && element.readOnly === false;
var isContentEditable = ( element. isContentEditable && element. isContentEditable === true );

// stop for enabled text inputs, selects and contentEditable areas
return (isTextInput && isEnabledInput) || eType === 'SELECT' || isContentEditable;

edited Mar 28, 2024 at 16:57

answered Nov 25, 2015 at 18:19

Fez Vrasta

15k25 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen Ostermiller Over a year ago

This is the most complete code for this problem I've seen so far. element.contentEditable doesn't seem to be the right thing to call. Instead it should be element.isContentEditable.

score 0 · Accepted Answer · 2015-11-25 21:41:42Z

0

If you wanna call a function depending on the type of input, create an array with the wished types of input, another with the types function and do a loop.

function GetInputType(e){ // e = element
   var Types=[
      "text",
      "password"
   ],
   Attr=e.getAttribute("type"),
   Actions=[
      function(){alert("It's text.")},
      function(){alert("It's password.")}
   ],
   Call=function(){alert("Unknown type.")};
   for(var i=0,l=Types.length;i<l;i++){
      !function(i){
         if(Attr==Types[i])
            Call=Actions[i];
         else break
      }(i)
   }
   Call()
}

edited Nov 25, 2015 at 21:41

answered Nov 25, 2015 at 18:30

user5066707

Comments

djechlin · Accepted Answer · 2015-11-25 18:02:45Z

-1

I think you're going to need to write something yourself. You're asking for more specific business logic than you think.

text is text.
number is text but the input must be 0-9, and decimal.
password is text-input, black circles or similar shown on screen.
Radio buttons are certainly keyboard-inputtable. Text won't display, but that's also true for password. Also the input is essentially "yes" or "no," but that's just a restriction on what keyboard inputs do, just like number is a restriction on what keyboard inputs do.

So you want something like...

the keyboard can input at least some of the time...
and text must display on screen unless it's a password...
and more input should be accepted than just a "space" or "enter" as in radio button or checkbox

That's not a standard HTML modifier, or standard jQuery, or anything. That's your own business logic.

I know this is a non-answer but I think there's good reason to believe you won't find what you're looking for out-of-the-box somewhere. It depends on your own application's logic, exactly what you mean by "text."

answered Nov 25, 2015 at 18:02

djechlin

61.1k40 gold badges173 silver badges300 bronze badges

7 Comments

Fez Vrasta Over a year ago

well actually I just need to know if the input displays a field where the user can insert characters or not...

djechlin Over a year ago

@FezVrasta does date count?

Fez Vrasta Over a year ago

I don't think so, date is a text input on not supported browser, and on supported browsers there's still a text input + widget

djechlin Over a year ago

@FezVrasta you mean it does count? since there's text input either way

Fez Vrasta Over a year ago

I mean, it's writable

|

Collectives™ on Stack Overflow

Check if input is of type "text/number/email/etc"?

3 Answers 3

1 Comment

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related