92

Can I replace the maxlength attribute with something in CSS?

<input type='text' id="phone_extension" maxlength="4" />
Brian Ramsay
  • 7,536
  • 8
  • 41
  • 52

8 Answers8

137

No.

maxlength is for behavior.

CSS is for styling.

That is why.

  • Also, CSS can be applied globaly to any tag, so it wouldn't make sense to have a maxlength property applied to a div or img etc. – Dan Diplo Sep 01 '09 at 15:44
  • 7
    But what if you wanted to apply a maxlength property to a common set of input types (e.g. first name, city, state) and you can have multiple instances of those inputs in various places through the web site. It would be great to be able to define a class (e.g. 'FirstName') and they apply that class to all First name Inputs – Catchops Dec 08 '11 at 14:42
  • @Catchops That is a limitation of HTML, and using CSS to work around this would be an ugly hack. That's why most web frameworks provide a template system with custom components. – Gabriel Nov 14 '18 at 16:55
73

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

edeverett
  • 8,012
  • 33
  • 28
12

You can use jQuery like: 

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

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

Community
  • 1
  • 1
macio.Jun
  • 9,647
  • 1
  • 45
  • 41
6

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?

Charlie
  • 10,227
  • 10
  • 51
  • 92
4

Not with CSS, no.

JMP
  • 7,734
  • 6
  • 33
  • 34
3

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

code_burgar
  • 12,025
  • 4
  • 35
  • 53
2

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.

Taylor Brown
  • 1,689
  • 2
  • 17
  • 33
  • 1
    This code is very easy to copy and paste for multiple field types. I keep a separate jQuery file called "maxLengths.js" and include that in my site master. Try it out, it is very convenient! – Taylor Brown Apr 02 '15 at 15:01
  • Just because you use a HTML class it's not CSS. – alexia Jun 01 '17 at 09:36
  • @nyuszika7h thanks for your much appreciated input on my answer. i would argue while i am not applying any style to the element, i am still using a cascading style sheet in my solution, therefore CSS is being utilized. in addition i have updated my answer to reflect your observation. – Taylor Brown Jun 01 '17 at 15:17
1

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

Livius
  • 3,240
  • 1
  • 17
  • 28
Rohit
  • 119
  • 1
  • 4