Maxlength does not work React Js
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"
/>
);
}
}
ReactJS input type = "text" maxLength is not working when passed as props
I finally figured out the answer and decided put it here for the people who may have the same question in the future :)
Answer:
if you want to pass maxLength as a props in React. You should use:
inputprops = {{maxLength = num}} (note: num can be any positive num you want. No {} and "" needed.
Then, in the place that receives this props, write:
inputprops = {this.props.inputprops}
To limit the input length, write:
<Input
inputprops={{maxLength: 100(e.g.)}}
/>
NOTE: Inputprops and inputprops are two different things in React. Be careful.
minLength doesn't work in typescript, react
Your code is fine. However minlength
works different than maxlength
.
- HTML
maxlength
prevents the user from typing keys more than the maxlength. - HTML
minlength
will let the user enter less keys compared to the requirement. After all, they need to be able to start from less chars to come up to more chars. That said the field will show an error if minlenght is not met.
Use this component and press the enter key to play around with the input field:
export default function App() {
return (
<form>
<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
<button type="submit">Submit</button>
</form>
);
}
ScreenshotsBecause its required:
Because minlenght is not met:
Maxlength property of input field is not respected
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.
Minlength doesn't work when I add onChange property
You are manually changing the value, and for some reason this is messing with the form submission validator.
This line breaks - e.target.value = allowedNick;
Making component controlled solved this for me.
export function Test() {
const [text, setText] = useState('') // added state
const handleNickname = (e) => {
let allowedNick = e.target.value;
allowedNick = allowedNick.replace(/ /gi, "");
allowedNick = allowedNick.replace(
/[~\-+=!?@#$%₩^&*|(){}\[\]\\\/'";:<>,]/gi,
""
);
setText(allowedNick) // changing state
};
return <form>
<input type="text" placeholder="text" onChange={handleNickname} required={true} minLength={2} maxLength={10} value={text} />
<button type="submit">Submit</button>
</form>
}
Related Topics
How to Import Modules from All Files in a Directory, Using a Wildcard
Jquery Get Closest Td Text Value
How to Wait Until 2 $Http Requests End in Angularjs
If a Div Contains a Specific String of Text, Edit the Parent'S CSS
How to Toggle (Hide/Show) Sidebar Div Using Jquery
Typescript Property Does Not Exist on Type {}
Validate Phone Number With Yup
React Native: Image Not Displaying With Dynamic/Local Uri
How to Make a Owl Carousel With Arrows Instead of Next Previous
How to Save an Image to Localstorage and Display It on the Next Page
How to Refresh Select Option List After Ajax Response
How to Compress an Image Via JavaScript in the Browser
How to Clear Location.State in React-Router on Page Reload
How to Reload Datatable by Ajax (Jquery)
Detect If Html5 Video Element Is Playing
Escaping Apostrophe (Single Quote) Character in JavaScript and HTML