score:16

Accepted answer

i have restricted the textbox to allow only numbers and formatted the mobile number as us mobile number format. follow the below code.

handlechange(e) {
    const onlynums = e.target.value.replace(/[^0-9]/g, '');
    if (onlynums.length < 10) {
        this.setstate({ value: onlynums });
    } else if (onlynums.length === 10) {
        const number = onlynums.replace(
            /(\d{3})(\d{3})(\d{4})/,
            '($1) $2-$3'
        );
        this.setstate({ value: number });
    }
}

score:-1

set class on your textfield:

<textfield type="number"
    inputprops={{classname:'digitsonly'}}
    floatinglabeltext="mobilenumber"
    value={this.state.value}
    onchange={this.handlechange}
    id={"mobilenumber"} name={"mobilenumber"}
/>

you can apply a class on your textfield that enables only numbers as follows:

$(".digitsonly").on('keypress',function (event) {
    var keynum
    if(window.event) {// ie8 and earlier
       keynum = event.keycode;
    } else if(event.which) { // ie9/firefox/chrome/opera/safari
       keynum = event.which;
    } else {
       keynum = 0;
    }

    if(keynum === 8 || keynum === 0 || keynum === 9) {
       return;
    }
    if(keynum < 46 || keynum > 57 || keynum === 47) {
       event.preventdefault();
    } // prevent all special characters except decimal point
}

restrict paste and drag-drop on your textfield:

$(".digitsonly").on('paste drop',function (event) {
    let temp=''
    if(event.type==='drop') {
        temp =$("#mobilenumber").val()+event.originalevent.datatransfer.getdata('text');
        var regex = new regexp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //allows only digits to be drag and dropped
        if (!regex.test(temp)) {
           event.preventdefault();
           return false;
        }
    } else if(event.type==='paste') {
        temp=$("#mobilenumber").val()+event.originalevent.clipboarddata.getdata('text')
        var regex = new regexp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //allows only digits to be pasted
        if (!regex.test(temp)) {
           event.preventdefault();
           return false;
        }
    }
}

call these events in componentdidmount() to apply the class as soon as the page loads.

score:3

in case you are using a form-validation library like react-hook-form, you can validate your textfield like this,

<textfield
     type="number"
     {...register("phonenum",{
         required: {
             value: true,
             message: 'please fill this field',
         },
         pattern: {
             value: /^[1-9]\d*(\d+)?$/i,
             message: 'please enter an integer',
         },
         min: {
             value: 1,
             message: 'value should be atleast 1',
         },
   })}
   error={errors?.index ? true : false}
   helpertext={errors?.index?.message}
/>

in case, you want to input phone numbers only, i would highly recommend to consider using react-phone-input-2.

score:3

its really simple in mui just add the line


<textfield
type='number' //ad this line
onchange={(e) => setcode(e.target.value)} label="enter otp" />

score:12 

import input from '@material-ui/core/input';

use <input type="number" /> instead.


Related Query

More Query from same tag