Menu
I am taking an input from the user of the card number and wants that the length entered by user must not be less than and more than 12. Here is the declaration of my textfield.
<TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" maxLength={12} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> Now I am not understanding whether to use javascript or any event handler for restricting the length.
925
Use the maxLength prop to set a character limit on an input field in React, e.g. <input maxLength={5} /> . The maxLength attribute defines the maximum number of characters the user can enter into an input field or a textarea element.
You can set the maxLength property for limiting the text in text box. Instead of onChange method you can pass maxLength to the inputProps (lowercase i, not InputProps) props of material-ui TextField . Basically we can edit all input element's native attrs via inputProps object. This was the easiest solution.
To only allow numbers to be entered in an input in React, we can set the pattern attribute of the input to only allow digits to be inputted. Then in the onChange handler, we only set the value of the input when the inputted value is valid.
To set the TextField height React Material UI, we can set the InputProps prop of the TextField to an object that has the classes property. to call makeStyles with a function that returns an object with the classes with height styles.
You can set the maxLength property for limiting the text in text box.
Instead of onChange method you can pass maxLength to the inputProps props of material-ui TextField.
<TextField required id="required" label="Required" defaultValue="Hello World" inputProps={{ maxLength: 12 }} /> Basically we can edit all input element's native attrs via inputProps object.
Link to TextField Api
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
