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.

11 thoughts on “Selecting input-fields with maxlength via jQuery

  1. 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?

  2. 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?

  3. 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…

  4. Thank for your Blog …………

    can you tell me more jquery design with simple coding .

    bobbyze

  5. 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

  6. Hey, thanks for this blog post… I had the same issue and found great help here. Note that IE6 also gives 2147483647 as implicit maxlength value, so if you want to update the table you are welcome ;-) Best regards and thanks again.

  7. 524288 is 2^19 (note: an even number), not the highest 16-bit number (note: 32767-signed, 65535-unsigned, both odd numbers) as stated above.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>