É 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?
É 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?
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^
- negativaVeja 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.
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 é:
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:
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" />