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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

restrict input of TextBoxComponent

Thread ID:

Created:

Updated:

Platform:

Replies:

142693 Feb 15,2019 10:18 AM UTC Feb 19,2019 03:27 PM UTC React - EJ 2 3
loading
Tags: Textbox
TOKO FIDELE
Asked On February 15, 2019 10:18 AM UTC

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 [Syncfusion]
Replied On February 18, 2019 09:19 AM UTC

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 


TOKO FIDELE
Replied On February 18, 2019 12:14 PM UTC

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 [Syncfusion]
Replied On February 19, 2019 03:27 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;