如何在 React 中将用户输入限制为十六进制值?
How to restrict user input to hexadecimal value in React?
这是我的输入:
这是它的定义:
<Input
// type="number"
id="numeroSerie"
name="num_serie"
defaultValue={this.state.num_serie}
onChange={this.onChange}
required
pattern="[a-fA-F0-9]+"
maxlength="1"
/>;
使用pattern="[a-fA-F0-9]+"
意味着用户可以输入任何他想要的内容,然后当他点击表单提交按钮时将执行验证。
我想要的是:
当用户点击任何非十六进制的字母或数字时,输入值不会改变。就像当输入类型是数字时,用户尝试输入文本。
这可以实现吗?
为了避免非法输入(the input value would not change
):
在处理函数中添加一个正则表达式条件就可以了。
/^[0-9a-f]+$/.test(yourValue) // hexadecimal
- 测试用例:十六进制:https://www.regextester.com/93640
const {useState} = React;
const App = () => {
const [value, setValue] = useState("");
const onChange = e => {
const input = e.currentTarget.value;
if (/^[0-9a-f]+$/.test(input) || input === "") {
setValue(input);
}
};
return (
<div className="App">
<input
id="numeroSerie"
name="num_serie"
value={value}
onChange={onChange}
/>
</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>
此解决方案使用输入元素的 onkeyup
事件根据任意正则表达式测试内容。这意味着输入元素可能会暂时显示非法字符,但在正则表达式测试显示内容非法后,将恢复之前的内容。使用 onkeyup
事件大大简化了处理过程。
function setupField(field, re)
{
field.autocomplete = "off";
field.saveValue = field.value;
field.onkeyup = function() {
var v = field.value;
if (v === '' || re.test(v)) {
field.saveValue = v;
}
else {
field.value = field.saveValue;
}
};
}
setupField(document.getElementById('hex'), /^[A-Fa-f0-9]+$/);
<input type="text" id="hex" size="8">
这是我的输入:
这是它的定义:
<Input
// type="number"
id="numeroSerie"
name="num_serie"
defaultValue={this.state.num_serie}
onChange={this.onChange}
required
pattern="[a-fA-F0-9]+"
maxlength="1"
/>;
使用pattern="[a-fA-F0-9]+"
意味着用户可以输入任何他想要的内容,然后当他点击表单提交按钮时将执行验证。
我想要的是:
当用户点击任何非十六进制的字母或数字时,输入值不会改变。就像当输入类型是数字时,用户尝试输入文本。
这可以实现吗?
为了避免非法输入(the input value would not change
):
在处理函数中添加一个正则表达式条件就可以了。
/^[0-9a-f]+$/.test(yourValue) // hexadecimal
- 测试用例:十六进制:https://www.regextester.com/93640
const {useState} = React;
const App = () => {
const [value, setValue] = useState("");
const onChange = e => {
const input = e.currentTarget.value;
if (/^[0-9a-f]+$/.test(input) || input === "") {
setValue(input);
}
};
return (
<div className="App">
<input
id="numeroSerie"
name="num_serie"
value={value}
onChange={onChange}
/>
</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>
此解决方案使用输入元素的 onkeyup
事件根据任意正则表达式测试内容。这意味着输入元素可能会暂时显示非法字符,但在正则表达式测试显示内容非法后,将恢复之前的内容。使用 onkeyup
事件大大简化了处理过程。
function setupField(field, re)
{
field.autocomplete = "off";
field.saveValue = field.value;
field.onkeyup = function() {
var v = field.value;
if (v === '' || re.test(v)) {
field.saveValue = v;
}
else {
field.value = field.saveValue;
}
};
}
setupField(document.getElementById('hex'), /^[A-Fa-f0-9]+$/);
<input type="text" id="hex" size="8">