HTML5 comes with a lot of new types for
<input />
How can I detect if an input field is "a text field" (date, time, email, text, everything)
I do not want to write input[type='text'],input[type='xxx'] ...
-
1Please only tag appropriately. This question has nothing to do with object, cross-browser, inspector, or properties. (Not my downvote)T.J. Crowder– T.J. Crowder2018-09-03 13:20:27 +00:00Commented Sep 3, 2018 at 13:20
-
object: The solution could be that a property in the INPUT-object lead to the fieldtype.user992154788– user9921547882018-09-03 13:21:56 +00:00Commented Sep 3, 2018 at 13:21
-
cross-browser: other browsers have other properties for html elements i guess..user992154788– user9921547882018-09-03 13:22:29 +00:00Commented Sep 3, 2018 at 13:22
-
2By that measure, almost all questions would be tagged object. Which would be unhelpful to put it mildly.T.J. Crowder– T.J. Crowder2018-09-03 13:22:57 +00:00Commented Sep 3, 2018 at 13:22
-
When you say 'text' inputs; what do you mean, exactly? That they contain text in the input element?OliverRadini– OliverRadini2018-09-03 13:41:26 +00:00Commented Sep 3, 2018 at 13:41
|
Show 1 more comment
4 Answers
You can use getAttribute to get whatever attribute you want (this includes type)
var input = document.getElementById('myinput');
var inputTYpe = input.getAttribute('type');
var isText = inputTYpe === 'text' || inputTYpe === '';
console.log('type is ', input.getAttribute('type'), ' is text = ', isText)<input type="hey" id="myinput" />
1 Comment
T.J. Crowder
Code dumps are not useful answers. Say what you did, and why.
CSS3 comes with a lot of new types for
<input />
HTML5, not CSS3.
I do not want to write
input[type='text'],input[type='xxx']
Unfortunately, I don't think you get a choice. But since the vast majority of them are text-like, you probably want to just call out the ones that aren't (like range, checkbox, radio, file, submit, image, reset, button — only one of which is new with HTML5).
Where possible, you'll want to isolate that to a single spot. You've mentioned CSS, which may make it difficult, but for instance if you were doing this in JavaScript, you'd want a single reusable function so you could update it as necessary.
2 Comments
d0n.key
Just make sure you define one central function / list, so you can update that at just one point if it changes someday.
T.J. Crowder
@Unknown - Very good point, I should have included that. (Now I have.)
function unameit(el) {
var words=['button','checkbox','hidden','image','radio','range','reset','submit'],tp=el.type.toLowerCase();
return words.indexOf(tp)<0;
}
Comments
If you want to differenciate between tags, you can check the tag by using
elementTag.tagName
For example, if you have a Input, you will get the text "INPUT"
And if you want to know what kind of imput is being used, you can check by looking at the attribute
elementTag.type
