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?
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?
Share Improve this question asked Dec 18, 2015 at 12:29 bskybsky 20.2k54 gold badges166 silver badges282 bronze badges 8 | Show 3 more comments3 Answers
Reset to default 15Your 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.
Just try below implementing in your input field
onInput={(e) => {e.target.value = Math.max( 0, parseInt(e.target.value)).toString().slice(0, 4);}}
This works for me:
<input className="form-control" maxLength={30} size={30} name="subject" />
maxLength
? (Note the capital L!) – TwoStraws Commented Dec 18, 2015 at 12:35maxLength
argument is not a null? – z1m.in Commented Dec 18, 2015 at 12:35maxLength
ormaxlength
:) – TwoStraws Commented Dec 18, 2015 at 12:43