Limit the number of characters in a select HTML/CSS/JS field

Question

Limit the number of characters in a select HTML/CSS/JS field

Asked 8 years, 3 months ago

Viewed 1,370 times

1

I know through the attribute maxlengthit is possible to limit the number of characters of a input.

The doubt: This property applies to select, if not what its equivalent would be, or how to achieve the same objective.

<select maxlength="5">
  <option value="opcao" maxlength="5">123456789</option>
</select>

Note that in the above code the attribute does not work, so how to proceed?

I’m afraid I can’t do what you want, the property maxlength, applies to the value of the component, but in the case of select, the user will not select an undefined value. In a way, it would be an unused property.

– Brumazzi DB

2016/08/24 at 15:46
Why do you need this?

– Juliano Alves

2016/08/24 at 15:48
@Julian when selecting one of the options, it exceeds its space and overrides "Arrow", the fact is that certain words the letter gets "food" or cut...

– MagicHat

2016/08/24 at 15:59
You can limit the maximum number once you put the number in each option. It is not the user to fill in.

– Jorge B.

2016/08/24 at 16:00
@Jorgeb. thanks for your attention, these options come dynamically, you have an idea, for me to limit the amount of letters ?

– MagicHat

2016/08/24 at 16:01
It seems that your problem is that you want to cut the text that will be presented in the option. Instead of doing this you can think about how to reshape a very large text.

– Juliano Alves

2016/08/24 at 16:18
@Juliano Sorry my English not is good but, u can show me any idea, how i can Solve my problem ?

– MagicHat

2016/08/24 at 16:20
You want every option of a size? Or who runs the size is the select?

– Renan Gomes

2016/08/24 at 16:30
@Thanks for your attention, I would like to limit all with 5 characters for example.

– MagicHat

2016/08/24 at 16:32
@Magichat can do this in the language you use to present dynamically, it doesn’t need to be in HTML.

– Jorge B.

2016/08/24 at 16:32
@Jorgeb. I see, you have an idea in js ?

– MagicHat

2016/08/24 at 16:33
@Magichat depends on how you fetch the data and where. You can put some code?

– Jorge B.

2016/08/24 at 17:07

Show 7 more comments

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Renan Gomes • **19,011** points · Answer 1 · 2016-08-24T17:10:55+00:00

You can use Javascript for this:

(function(){
  var selects = document.querySelectorAll('[data-limit]');
  
  // percorre a lista de selects
  [].forEach.call(selects, function(select){
    
    var limit = select.getAttribute('data-limit');
    
    // percorre a lista de options do select
    [].forEach.call(select.options, function(option){
      var text = option.innerHTML.substring(0, limit);
      option.innerHTML = text;
    });
  });
})();

<select data-limit='5'>
  <option>123</option>
  <option>1234567890</option>
  <option>123456</option>
</select>

<select data-limit='2'>
  <option>4321</option>
  <option>1234567890</option>
  <option>123</option>
</select>