Can I specify maxlength in css?

HtmlCss

Html Problem Overview

Can I replace the maxlength attribute with something in CSS?

<input type='text' id="phone_extension" maxlength="4" />

Html Solutions

Solution 1 - Html

No.

maxlength is for behavior.

CSS is for styling.

That is why.

Solution 2 - Html

No. This needs to be done in the HTML. You could set the value with Javascript if you need to though.

Solution 3 - Html

You can use jQuery like:

$("input").attr("maxlength", 4)

Here is a demo: http://jsfiddle.net/TmsXG/13/

Solution 4 - Html

I don't think you can, and CSS is supposed to describe how the page looks not what it does, so even if you could, it's not really how you should be using it.

Perhaps you should think about using JQuery to apply common functionality to your form components?

Solution 5 - Html

Not with CSS, no.

Solution 6 - Html

Not with CSS, but you can emulate and extend / customize the desired behavior with JavaScript.

Solution 7 - Html

As others have answered, there is no current way to add maxlength directly to a CSS class.

However, this creative solution can achieve what you are looking for.

I have the jQuery in a file named maxLengths.js which I reference in site (site.master for ASP)

run the snippet to see it in action, works well.

jquery, css, html:

$(function () {
    $(".maxLenAddress1").keypress(function (event) {

        if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
            return false;
        } else {
            return true;
        }

    });
});


.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" class="maxLenAddress1" />

The advantage of using this: if it is decided the max length for this type of field needs to be pushed out or in across your entire application you can change it in one spot. Comes in handy for field lengths for things like customer codes, full name fields, email fields, any field common across your application.

Solution 8 - Html

Use $("input").attr("maxlength", 4) if you're using jQuery version < 1.6 and $("input").prop("maxLength", 4) if you are using jQuery version 1.6+.

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

How do I insert non breaking space character &nbsp; in a JSF page?

JsfFacelets

Next Solution:

'casting' with reflection

C#ReflectionCasting

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBrian RamsayView Question on Stackoverflow
Solution 1 - Htmluser151323View Answer on Stackoverflow
Solution 2 - HtmledeverettView Answer on Stackoverflow
Solution 3 - Htmlmacio.JunView Answer on Stackoverflow
Solution 4 - HtmlCharlieView Answer on Stackoverflow
Solution 5 - HtmlJMPView Answer on Stackoverflow
Solution 6 - Htmlcode_burgarView Answer on Stackoverflow
Solution 7 - HtmlTaylor BrownView Answer on Stackoverflow
Solution 8 - HtmlRohitView Answer on Stackoverflow