CODEWITHSUNDEEP
javascripthtmlreactjs
bsky
bsky

Reputation: 20242

Maxlength property of input field is not respected

I have the following React method which should create an input field with a maximum length:

displayInputField: function(name, placeholder, updateMethod, maxLength) {
        return (
            <div className="form-group form-inline">
                <label>{name}</label>
                <input onChange={updateMethod} type="text" className="form-control"
                     maxlength={maxLength} placeholder={placeholder}/>

            </div>
        );
    },

However, the input field generated does not stop me from inputting more characters. Its source is this:

<input type="text" class="form-control" placeholder="<15 characters" data-reactid=".0.1.2.0.0.1.2.1.0.1">

Why is the maxlength attribute not respected?

Upvotes: 6

Views: 16235

Answers (3)

KIRAN
KIRAN

Reputation: 39

Just try below implementing in your input field

onInput={(e) => {e.target.value = Math.max( 0,    parseInt(e.target.value)).toString().slice(0, 4);}}

Upvotes: 1

aarkerio
aarkerio

Reputation: 2364

This works for me:

<input className="form-control" maxLength={30} size={30} name="subject" />

Upvotes: 0

TwoStraws
TwoStraws

Reputation: 13127

Your problem here was that you had written maxlength when in JSX it should have been maxLength. This lower camel case approach is the same for all HTML attributes, e.g. cellPadding, encType, and so on.

Remember, your JSX ultimately is JavaScript; you should read the list of supported tags and attributes if you're not sure.

Upvotes: 15

Related Questions