Limit the amount of html css characters

Asked

Viewed 328 times

-1

I made this input html + css and it’s okay, I just don’t want to limit the number of characters to 10, I tried the maxlength="10" but does not answer. Someone can help me?

<div class="searchBox">
    <input class="searchInput" type="number"  name="localizar" id="localizar" placeholder="numero do cliente">
    <button class="searchButton" href="#">
        <i class="material-icons">
            search
        </i>
    </button>
 </div>

javascript html css input

  • tried to use the attribute max in his input? maxlength and generally used for the type="text". If it is a mobile number, for example, change the type for text - https://www.w3schools.com/tags/att_input_type_number.asp

  • Thank you very much! Killed first! I switched the type by text ai the field accepted the maxlength.

1 answer

2

The estate maxlength doesn’t work if the type of input for "number". For this problem, a simple solution is to change the type to text.

<input class="searchInput" type="text" name="localizar" id="localizar" placeholder="numero do cliente" maxlength="10"/>

But if you need the type to be number for best use on mobile phones, you can use the type "tel" which will display a numeric keyboard and the maxlength will work the same way.

<input class="searchInput" type="tel" name="localizar" id="localizar" placeholder="numero do cliente" maxlength="10"/>

If for some reason you need to use the type "number", the solution will be with Javascript, where you should set the event oninput HTML to execute a function when the user inserts something into the text box. See the code below:

function maxLen(input) {
  if (input.value.length > 10) {
    input.value = input.value.slice(0, 10);
  }
}
<input class="searchInput" type="number" name="localizar" id="localizar" placeholder="numero do cliente" oninput="maxLen(this)">

Browser other questions tagged javascript html css input

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