How can I format an input to place a slash before the value that the user enters, so that the user cannot delete it because it is already formatted that way. I'm trying to add functionality to input /characters fields so as when the users enters digits, slashes "/" get automatically added before.
I'm new in React, so I don't any idea of how I can resolve that, please helpe me
An Example of the result I want to resolve
mascaraUserName = (text) => {
const selectedData_ = this.state.form;
formated = text;
if(formated.length==1){
//formated = text +'/';
if(selectedData_.userName.indexOf('/') == -1){
formated = text +'/';
}
}
console.log(formated);
// this.setState({ form: myRef });
}
<Col xs={24} sm={24} md={24} lg={24}>
<FormItem {...formItemLayout}
label={intl.formatMessage({ id: `maintenace.link.userName` })}>
{getFieldDecorator(`disable`, {
initialValue: "https://"
? "https://"
: ""
})(<Input style={{ color: "#3e3e3ed9"}} disabled="disabled"/>)}
{getFieldDecorator(`userName`, {
initialValue: selectedData_.userName
? selectedData_.userName
: ""
})(<Input className="inputLink" name="userName" ref={this.myRef} onChange={this.mascaraUserName} placeholder={intl.formatMessage({
id: `maintenace.link.nicknameIntructions`
})} />)}
</FormItem>
</Col>
You can make the input controlled and then intercept any change that tries to remove the initial "/":
Code sandbox
Edit: Didn't notice this was react native (it's not tagged as it) but I'll leave my answer here since you can probably still use the logic to achieve what you want.