function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bretondevbretondev 

lightning:input : maxlength attribute not working

Hello
It seems the maxlength attribute is not working on the lightning:input. Ihave put a maxlength of 5 but I can enter more than 5 characters. 
<lightning:input aura:id="cpOuDepartement" type="number" label="Code postal ou Département" maxlength="5" name="cpOuDepartement" value="{!v.searchRequest.cpOuDepartement}" />
Am i missing something?
 
Best Answer chosen by bretondev
Ashwin Kumar SrinivasanAshwin Kumar Srinivasan
Yes you will be able to enter 5 digits, but you should get an error. If you do not want the user entering more than 5 digit you should be making type as 'text' instead of 'number' and handler validations for the user not to enter the number.

All Answers

GhanshyamChoudhariGhanshyamChoudhari
lightning:input is in beta version 

you may use below code 
<lightning:input aura:id="cpOuDepartement"   type="number"   label="Code postal ou Département" messageWhenPatternMismatch="Too many characters!" pattern=".{0,5}"   name="cpOuDepartement" value="{!v.searchRequest.cpOuDepartement}" />

 
Ashwin Kumar SrinivasanAshwin Kumar Srinivasan
If you try using for type="text" it should be working, this could be because of how html <input type="number"> works as explained in this link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength and since lightning:input is in beta (salesforce might not be handling this).

Workaround is to use pattern as the user above mentioned, or use attribute max="99999" if you have expected higher bound value 
as shown in below code 
<lightning:input aura:id="cpOuDepartement" type="number" label="Code postal ou Département" max="99999" name="cpOuDepartement" value="{!v.searchRequest.cpOuDepartement}" />
bretondevbretondev
Thanks for the replies; I will look at that tomorrow back at the office
bretondevbretondev
I have tried all the solutions you proposed. But none of them works. I still can enter more than 5 digits.
Ashwin Kumar SrinivasanAshwin Kumar Srinivasan
Yes you will be able to enter 5 digits, but you should get an error. If you do not want the user entering more than 5 digit you should be making type as 'text' instead of 'number' and handler validations for the user not to enter the number.
This was selected as the best answer
bretondevbretondev
I have changed to type="text" and added maxlength="5" and now it works  well