We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

restrict input of TextBoxComponent

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,   

3 Replies

PO Prince Oliver Syncfusion Team February 18, 2019 01:19 AM

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 

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

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

Regards, 
Prince 



TF TOKO FIDELE February 18, 2019 04:14 AM

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,  


PO Prince Oliver Syncfusion Team February 19, 2019 07:27 AM

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. 

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

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon