Put length constraint in a TextField in react js

javascript reactjs event-handling react-router

100,423

Solution 1

I found another solution here.

<TextField
    required
    id="required"
    label="Required"
    defaultValue="Hello World"
    onInput = {(e) =>{
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
    }}/>

Solution 2

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

Solution 3

    <TextField
      autoFocus={true}
      name="name"
      onChange={handleChange}
      placeholder="placeholder"
      id="filled-basic"
      variant="filled"
      size="small"
      fullWidth
      inputProps={{
        maxLength: 25,
      }}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <SearchIcon />
          </InputAdornment>
        ),
      }}
    />

Solution 4

      <TextField
        id="username"
        name="username"
        label={translate('username')}
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.username}
        error={Boolean(errors.username) && touched.username}
        helperText={(errors.username && touched.username && translate(errors.username))}
        required
        inputProps={{maxLength :20}}

      />

Solution 5

Is it worth noting that Material-ui <TextField /> component doesn not have a maxlength property. However, the original html <input> does. So you don't really need to create any extra function to get this to work. Just use the base <input> attributes using inputProps.

The actual answer is this:

inputProps={
    {maxLength: 22}
}
// Result => <input maxlength="yourvalue" />

What this does is it sets the maxlength attribute of the underlying <input> resulting in: <input maxlength="yourvalue" />. Another important thing to note here is that you use inputProps and not InputProps. The one you're targeting is the small letter inputProps.

View more solutions

100,423

Author by

Mayank Bansal

An ENGINEER by passion and a DEVELOPER by profession.

Updated on February 21, 2022

Comments

Mayank Bansal about 2 years
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.
mewc about 6 years

this isn't a feature, there is only inputStyle
Tony Gaeta almost 6 years

This was the easiest solution. Thank you!
AmerllicA almost 6 years

Absolutely, the right way is using inputProps but if the input type is number your way is the proper way.
Temi 'Topsy' Bello almost 5 years

Still the best solution
hirikarate over 4 years

Warning: Mind the lowercase i in "inputProps", which is totally different with "InputProps" with uppercase I. I learnt it the hard way.
duduwe almost 4 years

Why does maxLength alone not work? I've seen a lot of maxLength answers, but only this solves the problem?
Amir Fo over 3 years

You are true, InputProps adds props to its parent container div.
Liran H over 3 years

@duduwe maxLength alone doesn't work simply because the <TextField> does not support this prop
user4463876 almost 3 years

Warning! This doesn't work with type="number"
glitchwizard almost 3 years

this doesn't work on <Input> fields if it's set to type="number"
Pranesh Janarthanan almost 3 years

onInput = {(e) =>{ var InputElement = (e.target as HTMLInputElement); InputElement.value = Math.max(0, parseInt(InputElement.value) ).toString().slice(0,12); }} in my environment .value is not recognised, so used HTMLInputElement.
Raul over 2 years

Works nice to me, thanks.
pjmathematician over 2 years

thank you, this worked for me while working with adornments
Avner Israel about 2 years

Keep in mind. The first example in this answer provides endAdornment as a prop of inputProps - this is a mistake. it should be InputProps
George about 2 years

This works on these types: password, search, tel, text, url, email. Ref