Author - StudySection Post Views - 187 views
maxlength attribute

The html “maxlength” attribute is not working as expected on Android Phones

Everyone knows the purpose of the “maxlength” Html attribute used on input fields. We use maxlength attribute/property so that the user cannot type more than a specified number of characters on input.

An example is:
<input type="text" class="zip" id="zip" name="zip" maxlength="5"/>

In the above example, a user will be able to type a maximum of 5 characters only. After typing 5 characters, nothing can be typed by the user due to maxlength property. This works perfectly on desktop browsers but doesn’t work as expected on android phones. On an android phone, if a user opens a page on a mobile browser, the user can type more than 5 characters, but this should not happen.

So, to overcome this issue, we have a very simple javascript solution and we can use it on the “oninput” attribute/event of input as shown below. “maxlength” attribute is a must to make this solution work.

<input type="text" class="zip" id="zip" name="zip" maxlength="5" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"/>

See how simple and one-line solution is to resolve an issue on android chrome browsers!

People having good command over the French language can get a French certification from StudySection. StudySection offers both beginner level and expert level French Certification Exams to test the ability to communicate in the French language.

Leave a Reply

Your email address will not be published.