Restrictions in the React text field

Asked

Viewed 4,761 times

5

It is possible for a text field to receive only the characters below?

numeros | espaço | barra (/) | traço (-)

The kind field number does not help me in this case, it would be nice to use the type text in this case?

javascript html react
  • 3

    Yes it is possible. In that order or can you have the order changed? And what happens when you type something "wrong"? erases, or does not let fill?

  • 1

    I think the ideal is not to even let appear, which I hope result something like 2016 - 2017 or 2016 / 2017 and its variances without space...

3 answers

1


You can use a regular expression which is a notation to represent patterns in strings. Serves to validate data entries or search and extract information in text.

Although there is already an answer, I decided to insert this one to explain what makes each item of the regular expression.

For this case:

numbers | space | bar (/) | dash (-)

  • \d - numbers
  • \s - space
  • / - bar
  • - - hyphen / dash
  • ^ - negative

See how it looks:

[^\d\s-/]

In this link in regex101 , you will see working the expression.

Now below, see how the encoding would look:

import React from "react";
import ReactDOM from "react-dom";

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value.replace(/[^\d\s-/]/g, "") });
  }

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
          id="text"
          name="password"
          placeholder="Entre aqui com os dados"
          autocomplete="off"
          required
        />
      </form>
    );
  }
}

function App() {
  return <NameForm />;
}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Behold functioning here.

0

As already answered by colleagues, it is possible to solve the problem in a "manual" way using regex, however, to maintain a more organized and consistent project, I recommend using specific libraries that have relevant adoption by the community. I particularly like the React-input-Mask, but there are several good libraries, many not specific to React but easy to integrate.

An example solving your problem in question:

<InputMask mask="9999 - 9999" />

0

You can use the property onChangeText of TextInput to filter what will be changed in your state local. Using the function replace (string) you can use a regular expression (example: /([^\d\s/-])/g) to filter what the user is typing and remove everything that is:

  • Numbers
  • Spaces
  • Barra ( / )
  • Hyphen ( - )

Example:

constructor() {
    super();

    this.state = {
        text: '2015',
    };

    this.filterText = this.filterText.bind(this);
}

filterText(text) {
    this.setState({
        text: text.replace(/([^\d\s/-])/g, '')
    });
}

render() {
    return (
        <View>
            <TextInput
                style={{
                    height: 40,
                    width: '90%',
                    borderColor: 'gray',
                    borderWidth: 1
                }}
                onChangeText={this.filterText}
                value={this.state.text}
            />
        </View>
    );
}

Relief material:

Browser other questions tagged javascript html react

You are not signed in. Login or sign up in order to post.