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