restrict special characters in reactNative TextInput

Question

I'm trying to prevent my TextInput from getting values like $,%,^,&,(,) etc. Basically my TextInput should allow letters only. My approach is as follows. But still i'm able to input these other characters. How can i prevent special characters from the TextInput

restrict(event) {
        const regex = new RegExp("^[a-zA-Z]+$");
        const key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    }

                         <TextInput
                                underlineColorAndroid='transparent'
                                allowFontScaling={false}
                                style={styles.questionText}
                                onKeyPress={e => this.restrict(e)}
                                value={firstNameState}
                            />

@WiktorStribiżew Thanks it's working.One problem though, Special characters get deleted only after i'm inputting a character. So if I entered a special character in the beginning and not enter anything after, i end up having a special character in my TextInput. How can i handle this? — CraZyDroiD
– CraZyDroiD, Commented Dec 11, 2018 at 7:14
I am not sure why that happens. If it is still related to the regex and not the code, try /^[^!-\/:-@\[-`{-~]*$/ — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Dec 11, 2018 at 7:52

Jesus David Diaz Diaz · Accepted Answer · 2019-08-20 18:31:10Z

1

the onKeyPress event on android does not work very well.

That is why I have chosen to use a method that eliminates these characters and then save it wherever you want, just as it might change the state of your field.

restrict = text => text.replace(/[`~0-9!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '')

answered Aug 20, 2019 at 18:31

Jesus David Diaz Diaz

331 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Akila Devinda Over a year ago

This should not be working unless you remove " i " from " gi " at the end of this expression

Przemyslaw Over a year ago

Could be just restrict = text => text.replace(/[^a-z]/gi, '').

Atul Tiwaree · Accepted Answer · 2023-09-15 08:07:35Z

0

I have to block special characters by this line of code.

var format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
 
if(format.test(string)){ 

   //Do something here

}

edited Sep 15, 2023 at 8:07

Atul Tiwaree

1031 silver badge7 bronze badges

answered Nov 22, 2021 at 12:38

Ali Raza Khan

2793 silver badges6 bronze badges

Comments

Wiktor Stribiżew · Accepted Answer · 2022-03-08 08:13:03Z

-1

You may define your OnChange event handler using your regex, where you will check if the input string matches your regex with /^[^!-\/:-@\[-`{-~]+$/.test(text):

const {useState} = React;

const App = () => {
  const [value, setValue] = useState("");
  const onChange = e => {
    const input = e.currentTarget.value;
    if (/^[^!-\/:-@\[-`{-~]+$/.test(input) || input === "") {
      setValue(input);
    }
  };
  return (
    <div className="App">
      <input
        value={value}
        onChange={onChange}
        underlineColorAndroid='transparent'
        allowFontScaling={false}
      />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

edited Mar 8, 2022 at 8:13

answered Mar 26, 2020 at 11:17

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

1 Comment

Angel S. Moreno Over a year ago

OP said ReactNative, not React

Collectives™ on Stack Overflow

restrict special characters in reactNative TextInput

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related