4

É possível que um campo texto receba somente os caracteres abaixo?

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

O campo tipo number não me ajuda nesse caso, seria legal usar o tipo texto nesse caso?

2
  • 3
    Sim é possivel. Por essa ordem ou pode ter a ordem trocada? E o que acontece quando se digita algo "errado"? apaga, ou não deixa preencher?
    – Sergio
    Commented 19/07/2017 às 22:18
  • 1
    Acho que o ideal não é nem deixar aparecer, o que espero de resultado algo como 2016 - 2017 ou 2016 / 2017 e suas varianças sem espaço... Commented 19/07/2017 às 22:25

3 Respostas 3

1

Você pode usar um expressão regular que é uma notação para representar padrões em strings. Serve para validar entradas de dados ou fazer busca e extração de informações em textos.

Apesar de já existir uma resposta, resolvi inserir esta para explicar o que faz cada item da expressão regular.

Para este caso:

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

  • \d - números
  • \s - espaço
  • / - barra
  • - - hífen / traço
  • ^ - negativa

Veja como fica:

[^\d\s-/]

Neste link no regex101 , você vai ver funcionando a expressão.

Agora abaixo, veja como ficaria a codificação:

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);

Veja funcionando aqui.

0

Você pode usar a propriedade onChangeText do TextInput para filtrar o que vai ser alterado no seu state local. Usando a função replace (string) você pode usar uma expressão regular (exemplo: /([^\d\s/-])/g) para filtrar o que o usuário está digitando e remover tudo que é:

  • Numeros
  • Espacos
  • Barra ( / )
  • Hífen ( - )

Exemplo:

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>
    );
}

Material de ajuda:

0

Como já respondido pelos colegas, é possível solucionar o problema de forma "manual" utilizando regex, entretanto, para manter um projeto mais organizado e consistente, recomendo utilizar bibliotecas específicas que possuem adoção relevante por parte da comunidade. Particularmente gosto do react-input-mask, mas existem diversas boas bibliotecas, muitas não específicas para React mas de fácil integração.

Um exemplo solucionando seu problema em questão:

<InputMask mask="9999 - 9999" />

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .