CODEWITHSUNDEEP
javascripthtmlreactjs
Mike Otharan
Mike Otharan

Reputation: 953

Maxlength does not work React Js

I have an input with React, but maxlength does not work. Does anyone know how to solve this?

This is handleChangeInput

 handleChangeInput(input) {
    this.setState({
        ...this.state,
        form: {
            ...this.state.form,
            [input.target.name]: input.target.value
        }
    })
}

And this is my input:

<div className="input-field col s12 m6 l6">
    <input onChange={this.handleChangeInput} value={this.state.form.message} type="text" className="phone validate" name="phone" maxlength="11"/>
    <label for="telefone">Telefone</label>
</div>

Code preview

Upvotes: 50

Views: 143730

Answers (10)

Baris Taskiran
Baris Taskiran

Reputation: 148

For me, this approach did work.

<Input 
   placeholder=''
   type="text"
   maxLength="10"
   onInput={(e) => {
         e.target.value = e.target.value.replace(/[^0-9]/g, '');
    }}
    onChange={(e) => {
       const { value } = e.target;
    }}
/>

Upvotes: 1

Mohammed Yousuff
Mohammed Yousuff

Reputation: 326

i have fix this using simple attribute.

<TextField
  type="text"
  pattern="[0-9]{10}"
  maxLength="10"
  label="Phone Number"
 />

Upvotes: 0

Rahul Dasgupta
Rahul Dasgupta

Reputation: 809

For the people who's input type is number, this code will work

handlePhone(object) {
    if (object.target.value.length > object.target.maxLength) {
      object.target.value = object.target.value.slice(0, object.target.maxLength)
      this.setState({ phone: object.target.value });
    }
}

<input
    placeholder="Phone Number"
    onChange={this.handlePhone}
    type = "number" maxLength = "10"
/>

Upvotes: 3

Wani Mudasir
Wani Mudasir

Reputation: 21

<input
    id="ZIPCode"
    className="form-control"
    type="text"
    maxLength={10} // this is the important line
></input>

React uses camelCased html attributes, so maxlength would then be maxLength

Upvotes: 1

Jaskaran Singh
Jaskaran Singh

Reputation: 21

Simply do like this in your handleOnChange Function:

 handlePasswordChange = (e) => {
    if(e.target.value <= 11){
    this.setState({
      [e.target.name]: e.target.value
    });
   }
  };

Upvotes: 2

Treadmeister
Treadmeister

Reputation: 201

For anybody using a reactstrap input, like other properties it uses (e.g. colSpan) it needs both camelCase naming and a number passing to it (e.g. maxLength={250}), rather than a string. I have found passing a string will work but React will complain about it.

Upvotes: 0

aakash sharma
aakash sharma

Reputation: 159

inputProps = {{maxLength:6}}
variant="outlined"

Upvotes: 5

Chirag Shah
Chirag Shah

Reputation: 474

You need to pass maxLength value as a number.

<input
  onChange={this.handleChangeInput}
  value={this.state.form.message}
  type="text"
  className="phone validate"
  name="phone"
  maxLength={11}
/>

Upvotes: 16

Micah Friedland
Micah Friedland

Reputation: 531

for maxLength to work, type has to be 'text' (most people are probably putting number)

Upvotes: 53

Tholle
Tholle

Reputation: 112787

Property and attribute names are generally camelCase in React, maxLength works.

<input
  onChange={this.handleChangeInput}
  value={this.state.form.message}
  type="text"
  className="phone validate"
  name="phone"
  maxLength="11"
/>

However, you can still override this option if you give the input a value longer than maxLength. The only way around this is to check the length of the value in the callback, and truncate it.

Example

class App extends React.Component {
  state = { form: { message: "" } };

  handleChangeInput = event => {
    const { value, maxLength } = event.target;
    const message = value.slice(0, maxLength);

    this.setState({
      form: {
        message
      }
    });
  };

  render() {
    return (
      <input
        onChange={this.handleChangeInput}
        value={this.state.form.message}
        type="text"
        className="phone validate"
        name="phone"
        maxLength="11"
      />
    );
  }
}

Upvotes: 81

Related Questions