Selecting input-fields with maxlength via jQuery
524288?
2147483647?
-1?
No, that’s not my bank account balance…
Unlike any other attribute, maxlength is implicitly present on any input-element. I had to find this out the hard way trying to select only input-elements with an explicitly set maxlength via the jQuery-selector input[maxlength].
Well, that didn’t work. input[maxlength] returns all inputs, regardless of whether they have maxlength or not. The only conclusion this leaves us with is that browsers add a certain maxlength-value implicitly to any input-field.
What’s my browser doing with maxlength?
That’s exactly what I asked myself. A quick browser test left me quite surprised, but, hey – what did I expect – every browser behaving the same? Not in this world…
Every browser rendering engine implies a different value. The most reasonable browsers are Firefox (surprised?) and Opera – they are at least assuming a negative value. The other values seem (at least to me, maybe I’m just missing some nerdy inside joke) completely arbitrary are natural limits: 2147483647 is the highest possible 32-bit-number (2^32 /2 or 0111 1111 1111 1111 1111 1111 1111 1111), while 524288 is the same in 16 bit:
| Browser | OS | Version | Implicit maxlength-value |
|---|---|---|---|
| Firefox | Windows | 3 | -1 |
| Internet Explorer | Windows | 7 | 2147483647 |
| Safari | Windows | 3.2 | 524288 |
| Opera | Windows | 9.6 | -1 |
| Chrome | Windows | 0.4 | 524288 |
jQuery to the rescue
So back to the original problem – my solution for selecting only input-fields with maxlength-attributes based on these findings is as follows:
var inputs = $('input[maxlength!=-1][maxlength!=524288][maxlength!=2147483647]');
Ugly, I know. But it works.
Take the Browser Test
and post your result in the comment section!
Why?
Why would I want to select only this subset of input elements anyway? In my case, it was to display the number of total and remaining characters a user could enter.
Leave a Reply
Wow, very impressive. While just working with a ton of forms on my latest app, I’m glad I never had to select all by maxlength!
Also, how did you determine the other numbers in the other browsers? What test/code did you run?
Joe McCann
16:37, Dezember 5th, 2008
I just ran the same test in different browser… moep.
Christoph Schüßler
01:14, Dezember 6th, 2008
Because we cannot predict how future or new browser versions will handle these implicit values I guess the best option is to add class=’maxlength’ to each input and/or textarea field you would like to access. You agree?
Bart
17:24, März 25th, 2009
I wouldn’t exactly call it the “best” option insofar as it adds unnecessary class names to the source. The beauty of jQuery’s selector engine is that it allows to select elements in very different ways, and selecting by attribute (which is part of CSS 3 but very badly supported as of now) is an especially useful feature. I would rather call it the best option, but as my article shows, it’s just not the easiest, an with regards to future browser generations, maybe not the safest. But, although I really don’t like to make predictions here, I would guess that different browser vendors will stick to their own quirks in this matter…
Christoph Schüßler
18:50, März 25th, 2009
Thank for your Blog …………
can you tell me more jquery design with simple coding .
bobbyze
Bobbyze
08:26, Februar 22nd, 2010
Wouldn’t it be better to test for existence of maxlength attribute?
$(“input[maxlength]“) // does not include input w/o maxlenght
or
$(“input”)[0].hasAttribute(“maxlength”) // test on DOM element
Hari
15:09, August 11th, 2010
@Hari: That’s exactly the problem I described above – your code doesn’t work. Please re-read… ;-)
Christoph Schüßler
11:05, August 16th, 2010