如何阻止在文本字段中输入每个数字[重复]答案

【问题标题】：How to block every number from being entered in text field [duplicate]如何阻止在文本字段中输入每个数字[重复]
【发布时间】：2022-01-10 00:26:23
【问题描述】：

我想完全不允许用户在文本字段中输入任何数字，我怎样才能使它与 js 一起工作？我正在尝试用正则表达式替换数字，但似乎不起作用

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>

我也试过了

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

开始时似乎不允许任何数字，但是当我输入文本然后输入数字时，它会在不应该的时候允许。有人可以给我建议吗？

【问题讨论】：

标签： javascript

【解决方案1】：

您应该将您的正则表达式模式反转为 [0-9] 而没有 ^，因为它匹配任何不是数字的东西。

此外，您可能还需要考虑替换输入元素的值。

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>

【讨论】：

@meagar 感谢您的更正：有周末的大脑。
最好使用keypress事件和preventDefault。使用 input 会做大量带有异国情调的用例的不需要的东西。使用input，例如如果您替换值，还必须手动进行正确的光标放置，考虑在输入发生时是否标记了部分值等。还将 event.target.value 放在模板文字中是无用的开销。

【解决方案2】：

添加一个 'keydown' 事件侦听器，用于检查新字符是数字还是其他字符。这将不允许输入数字而不是之后替换它。

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

【讨论】：

【解决方案3】：

你可能想要这样的东西？

这会更改<input> 的值，替换用户插入的任何数字。

此外，正则表达式几乎是正确的，您只需要删除 ^，因为它只匹配字符串开头的数字。

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

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

&lt;input type="text" class="ice-cream"&gt;

【讨论】：

【解决方案4】：

我认为你的代码有两个错误：

您没有更新输入值。
另外，[^0-9] 将留下数字，而不是您在console 中看到的字符串

注意：

replace() 方法返回一个新字符串，其中模式的部分或全部匹配被替换替换。

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>

【讨论】：