How to block every number from being entered in text field

user_17575164 0
Viewed 160

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?

javascript
4 Answers

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>

user_3959100

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

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

user_112691580

I think there are two errors in your code:

  1. You doesn't update the input value.
  2. 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>

user_177436470
Related