Search code examples
javascriptjqueryhtmlmaxlength

Adding a Maxlength attribute to HTML using jQuery

I'm having an issue at work with a rather picky client.

We use a rather strange script to deal with something that they require. We're an online assessment company and this script in general applies in our test player, rather than in our question editor, so we can't make change in the html, as you normally would with a text input box.

I know the maxlength attribute can be added through use of jQuery by using something along the lines of $("input").prop("maxLength", 3)

However, I do not know how I would reference this in the HTML, as it would only be used in a couple of questions that use this script so making it standard for these questions by adding it to the JavaScript used is not an option.

Solution

  • The inputs that you need to apply this to would need to have ID's or Classes. As you cannot edit the HTML this would only work, if those input's had ID's or Classes already.

    If you want to apply it to an element with an Id you would do:

    $("#IDGOESHERE").prop("maxLength", 3);

    http://api.jquery.com/id-selector/

    If it was with a class :

    $(".CLASSNAMEHERE").prop("maxLength", 3);

    http://api.jquery.com/class-selector/

    You could get a little more fancy, by using EQ, 

    $("input").eq(5).prop("maxLength", 3);

    Which would apply the max length to the 5th input on the page.

    http://api.jquery.com/eq/