8

Possible Duplicate:
Can I specify maxlength in css?

In my CSS I use this code to make round borders for all the input tags in my site. I wonder if it is possible to limit the lenght of the input in the same way (for example 50 characters)

input  
{ 
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}

I imagine something like (this is not working):

input
{
max-lenght: 50;
}

Any sugestions? Thank you very much!

EDIT: This question is about how many characters can the user write into the field, not the visible size of the input

Community
  • 1
  • 1
yenssen
  • 1,171
  • 2
  • 23
  • 37
  • Via HTML ? http://www.w3schools.com/tags/att_input_maxlength.asp – Vucko Nov 21 '12 at 00:00
  • Well, I suppose it's exactly because `maxlength` limitation is the semantic, and not the representational one, it's specified as HTML attribute, and not as CSS rule. – raina77ow Nov 21 '12 at 00:18
  • in css you use `:` instead of `=` – zeyorama Nov 21 '12 at 00:19
  • @raina77ow I don't think is a duplicate. I already read the question before write this. It is not the same CSS and CSS3. The question was made almost 4 yeas ago. Possibly there exist a new way using CSS3. – yenssen Nov 21 '12 at 00:24
  • 1
    Yet this question (and [this answer](http://stackoverflow.com/a/1363041/1229023) in particular) shows exactly why it's not appropriate to specify this (as any other validation-related input attributes) in CSS. It's not about _styling_ your document, period. If you want uniformity, you could use a JS initializer function that will add maxlength attribute to all your inputs. – raina77ow Nov 21 '12 at 00:32
  • I'm agree that the answer can be the same, (I hope no, but if I knew the answer was the same, I would have avoided the question) as is one answer in this question too (http://stackoverflow.com/a/9603933/1546946) but that doesn't mean the question is the same. ;) – yenssen Nov 21 '12 at 00:53

3 Answers3

20

You cannot use CSS to limit the number of input characters. That would be a functional restriction, and CSS deals with presentation.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
16

I would handle the character limit in the html input field. e.g.

<input type="text" id="textbox" name="textbox" maxlength="50" />
jfmbrennan
  • 196
  • 5
  • yes, but I have a lot of them and I was wondering for an "automatic" way :) – yenssen Nov 21 '12 at 00:02
  • you could go to the trouble of writing JavaScript to limit the number of characters entered into an input box. You would need to bind the 'keydown' event of the input field, do a count on the characters and if more than 50, prevent the character from being written to the input field – jfmbrennan Nov 21 '12 at 00:07
  • try this... http://jsfiddle.net/mKcgn/ – jfmbrennan Nov 21 '12 at 00:15
  • 1
    @jfmbrennan That fiddle is a terrible solution, with all due respect. How am I supposed to fix the input if it's 50 characters long? It just rejects all the key pressings after that. – raina77ow Nov 21 '12 at 00:19
  • It was more of a gist than a solution, you would need to handle the backspace key and possibly others. Its crude and i take you're point on board. It was more of a "this is a possible alternative" as opposed to what i would recommend. Using the html maxlength attribute is the proper answer – jfmbrennan Nov 21 '12 at 00:25
  • @yenssen I'm pretty sure that no JavaScript or CSS really accurately measures any width in characters. This is the most accurate answer. Do it in the markup. – Chris Peters Nov 21 '12 at 00:45
2

Update:

You can use only Jquery.

$(document).ready(function () {
    $("input").attr('maxlength', '5');    
});

If you really want an automatic method you can use combination of css and javascript.

Javascript/JQuery

$(document).ready(function () {
    // Get all the elements with class inputMaxLength and add maxlength attribute to them
    $(".inputMaxLength").attr('maxlength', '5');    
});

CSS

.inputMaxLength
{

}

HTML

<input type="text" id="textbox" class="inputMaxLength" name="textbox" />

Bit of a hack, but works. There is no css only solution as far as I am aware.

Nadeeja Bomiriya
  • 368
  • 2
  • 9