restrict input of TextBoxComponent

[TOKO FIDELE]

Hi, I have two problems with the TextBoxComponent component.

   I would like to set the size of the input of the user, with the input on the maxLength property that blocks the input of the user when maxLength is reached, please how do we do it with the TextBoxComponent?

I will also want to restrain / block the input of the characters and only accept the natural numbers in the input

Thanks in advance and regards,   

[Prince Oliver]

Hi Toko,  

Thank you for contacting Syncfusion support. 

Query 1: I would like to set the size of the input of the user, with the input on the maxLength property that blocks the input of the user when maxLength is reached, please how do we do it with the TextBoxComponent? 

We can set the maxLength property as the HTML attribute to the input element of the TextBoxComponent on “created” event. Kindly refer to the following code snippet. 

export class Default extends SampleBase { 

    onCreated() { this.element.setAttribute('maxLength', '5') } 

    render() { 

        return (<div className='control-pane'> 

            <div className='control-section input-content-wrapper'> 

                <div className="row custom-margin"> 

                    <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"></div> 

                </div> 

                <div className="row custom-margin custom-padding-5"> 

                    <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 

                        <TextBoxComponent placeholder="Max length" created={this.onCreated} floatLabelType="Auto" /> 

                    </div> 

                </div> 

            </div> 

        </div>); 

    } 

} 

Query 2: I will also want to restrain / block the input of the characters and only accept the natural numbers in the input. 

We can achieve this requirement by using type property as number to accepts only the natural numbers in the input. Kindly refer to the following code snippet. 

export class Default extends SampleBase { 

    render() { 

        return (<div className='control-pane'> 

            <div className='control-section input-content-wrapper'> 

                <div className="row custom-margin"> 

                    <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"></div> 

                </div> 

                <div className="row custom-margin custom-padding-5"> 

                    <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 

                        <TextBoxComponent placeholder="Natural Number" type="number" floatLabelType="Auto" /> 

                    </div> 

                </div> 

            </div> 

        </div>); 

    } 

} 

We have prepared the sample based on your requirement, please find the sample at the following location 

Sample Link: https://stackblitz.com/edit/react-nnxhwf-wd5qul 

To know more about text box component please refer the below UG documentation link. 

UG Link: https://ej2.syncfusion.com/react/documentation/textbox/groups/  

API Link: https://ej2.syncfusion.com/react/documentation/api/textbox/#type 

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[TOKO FIDELE]

Hi Prince Oliver.

thank you for your own reaction. I am more pleased with the service.

my first query is resolved however, compared to the second, using the type property with the value number does not completely solve my problem because I do not want the user to type the dot or comma {. or , }. I would like the field to validate only numbers from 0 to 9 and spaces. the regular expression / ^ [0-9]  +$ /

Thanks in advance and regards,  

[Prince Oliver]

Hi Dmytro, 

Thank you for using Syncfusion products. 

We have achieved your requirement to validate only numbers from 0 to 9 and spaces by validating the input values in the key down event of the text box. Kindly refer to the following code snippet. 

export class Default extends SampleBase { 

    onCreated() { 

        const input = document.querySelector('input'); 

        input.addEventListener('keydown', function (e) { 

            if (/ ^ [0-9] $ /.test(e.key) || e.key === '.' || e.key === '-' || e.key === '') { e.preventDefault(); return true; } 

        }) 

    } 

    render() { 

        return (<div className='control-pane'> 

            <div className='control-section input-content-wrapper'> 

                <div className="row custom-margin"> 

                    <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"></div> 

                </div> 

                <div className="row custom-margin custom-padding-5"> 

                    <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 

                        <TextBoxComponent placeholder="Natural Number" type="number" floatLabelType="Always" created={this.onCreated} /> 

                    </div> 

                </div> 

            </div> 

        </div>); 

    } 

} 

Please find the sample from the below link. 

Sample Link: https://stackblitz.com/edit/react-nnxhwf-xkpg4m  

Please let us know if you need any further assistance on this. 

Regards, 

Prince