How to restrict user input to hexadecimal value in React?

Question

This is my input:

This is its definition:

<Input
  // type="number"
  id="numeroSerie"
  name="num_serie"
  defaultValue={this.state.num_serie}
  onChange={this.onChange}
  required
  pattern="[a-fA-F0-9]+"
  maxlength="1"
/>;

Using pattern="[a-fA-F0-9]+" means that the user can enter whatever he wants and then the validation will be performed when he clicks on the form submit button.
What I would like is:

When the user clicks on any letter or a number that isn't hexadecimal, the input value would not change. Just like when the input type is number, and the user tries to enter a text.

Is this possible to implement?

type="text" works

M A Salman
– M A Salman

2020-03-26 10:36:32 +00:00
Commented Mar 26, 2020 at 10:36 — M A Salman
– M A Salman, Commented Mar 26, 2020 at 10:36
Could you create an online fiddle showing the issue?

Wiktor Stribiżew
– Wiktor Stribiżew

2020-03-26 10:41:59 +00:00
Commented Mar 26, 2020 at 10:41 — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Mar 26, 2020 at 10:41

keikai · Accepted Answer · 2020-03-26 11:05:38Z

2

To avoid illegal input (the input value would not change):

Add a regex condition inside the handler function would be fine.

/^[0-9a-f]+$/.test(yourValue) // hexadecimal

Test case: 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>

edited Mar 26, 2020 at 11:05

answered Mar 26, 2020 at 10:46

keikai

15.3k10 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AG_HIHI Over a year ago

This works, but it still presents a problem, when the user enters an illegal character, it still gets displayed on the input field whereas it shouldn't.

AG_HIHI Over a year ago

my bad, man. I was using defaultValue instead of value in the input. Thank you so much it works perfectly

keikai Over a year ago

@AhmedGhrib Yeah, since you have fully controlled the component, you don't need defaultValue any more

Booboo · Accepted Answer · 2020-03-26 10:56:42Z

1

This solution uses the onkeyup event of the input element to test the content against an arbitrary regular expression. That means that the input element might momentarily display an illegal character but after the regex test reveals the content to be illegal, the prior contents will be restored. Using the onkeyup event greatly simplifies processing.

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">

answered Mar 26, 2020 at 10:56

Booboo

45.7k4 gold badges46 silver badges74 bronze badges

1 Comment

AG_HIHI Over a year ago

This is also works. But, the React solution, mentioned above is more comprehensive and effective.

Collectives™ on Stack Overflow

How to restrict user input to hexadecimal value in React?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related