How to block every number from being entered in text field

Question

I want to completely not allow a user to input any number in a text field, how can I make this work with js? I am trying to replace the numbers with regex but doesn't seem to work

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  let temp = event.target.value.replace(/[^0-9]/g, '');
  result.textContent = `${temp}`;
});

<input type="text" class="ice-cream">
<p class="result">
</p>

I have also tried this

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  let pattern = new RegExp(/[A-Z]/i);
  if(pattern.test(event.target.value)) {
    result.textContent = `${event.target.value}`;

  } else return;
});

It seems not to allow any number at start but when I enter a text and then number then it allows when it shouldn't. Can someone give me advice?

Terry · Accepted Answer · 2022-01-09T16:26:23.083

1

You should invert your regex pattern to [0-9] without the ^, because that matches anything that tis not a digit.

Also, you might want to consider replacing the input element's value as well.

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('input', (event) => {
  const result = document.querySelector('.result');
  event.target.value = event.target.value.replace(/[0-9]/g, '');
  result.textContent = event.target.value;
});

<input type="text" class="ice-cream">
<p class="result">
</p>

edited Jan 09 '22 at 16:26

answered Jan 09 '22 at 15:14

Terry

63,248
15
96
118

@meagar Thanks for the correction: had weekend brain. – Terry Jan 09 '22 at 15:26
It's better to use `keypress` event and `preventDefault`. Using `input` will do a ton of unwanted stuff with exotic use cases. With `input` you'd e.g. also have to do correct cursor placement manually if you replace the value, consider if part of the value was marked when input occurred etc. Also putting event.target.value in a template literal is useless overhead. – connexo Jan 09 '22 at 16:20

score 1 · Answer 2 · answered Jan 09 '22 at 15:21

Add an event listener of 'keydown' that checks if the new character is a number or something else. This will not allow the number to ever be typed instead of replacing it afterwards.

var input = document.querySelector('input');
input.addEventListener('keydown', e => {
    if (e.key >= '0' && e.key <= '9') {
        e.preventDefault();
    }
}

score 0 · Answer 3 · answered Jan 09 '22 at 15:21

You might want something like this?

This changes the value of the <input>, replacing any number inserted by the user.

Also, the regex was almost on point, you just needed to remove the ^, since that only matches digits at the start of the string.

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('input', (event) => {
  selectElement.value = selectElement.value.replace(/[0-9]/g, '');
});

<input type="text" class="ice-cream">

score 0 · Answer 4 · answered Jan 09 '22 at 15:21

I think there are two errors in your code:

You doesn't update the input value.
Also, [^0-9] will leave with number, not string as you can see in the console

Notice that:

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement.

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  console.log(selectElement.value.replace(/[^0-9]/g, ''))
  selectElement.value = selectElement.value.replace(new RegExp("[0-9]", "g"), "")

});

<input type="text" class="ice-cream">
<p class="result">
</p>

How to block every number from being entered in text field

4 Answers4