CODEWITHSUNDEEP
javascriptregexreactjsreact-native
CraZyDroiD
CraZyDroiD

Reputation: 7105

restrict special characters in reactNative TextInput

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}
                            />

Upvotes: 5

Views: 23417

Answers (3)

Ali Raza Khan
Ali Raza Khan

Reputation: 261

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

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

   //Do something here

}

Upvotes: 0

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 626738

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>

Upvotes: -1

Jesus David Diaz Diaz
Jesus David Diaz Diaz

Reputation: 33

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, '')

Upvotes: 1

Related Questions