避免在输入字段中输入点答案

【问题标题】：Avoid enter dot in input field避免在输入字段中输入点
【发布时间】：2021-12-10 11:27:18
【问题描述】：

我有一个数字类型的输入字段，当我输入点时，我没有得到值。所以我想要实现的是我不希望用户在输入字段上输入点

function handleChange (value) {
 console.log(value)
}

&lt;input type="number" onchange="handleChange(this.value)"/&gt;

在每个输入的数字上我都会得到值，但是当我输入点 (.) 时，我没有得到当用户输入时如何阻止它

【问题讨论】：

您分享的代码 sn-p 完全符合您的要求。有什么问题？
当用户键入点时，为什么不使用一些 jquery 将值设置为 ''
这能回答你的问题吗？ HTML input for Positive Whole Numbers Only (Type=number)
类型数字不排除十进制数字，从而避免了 .可能是致命的，因为输入 2.4 是有效的输入。如果您尝试在 2.4 之后添加一个点，您会发现这不再起作用，因为一个数字没有 2 个点。这是完全故意的行为

标签： javascript html

【解决方案1】：

<input name="num" type="number" min="1" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57">

来自此网址的参考 https://stackoverflow.com/a/44379790/4316212

【讨论】：

【解决方案2】：

添加这个oninput="this.value = this.value.replace(/[^0-9]/, '')"

function handleChange (value) {
 console.log(value)
}

&lt;input type="number" onchange="handleChange(this.value)" oninput="this.value = this.value.replace(/[^0-9]/, '')"/&gt;

【讨论】：

【解决方案3】：

如果你想阻止'.'你可以这样用，

function handleChange (value) {
console.log(value)
}

var inputBox = document.getElementById("inputBox");

var invalidChars = [
".",

];

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});
<input type="number" id="inputBox" onchange="handleChange(this.value)/>

【讨论】：

【解决方案4】：

一般是not a good idea使用内联事件处理器。

要获得更多控制，您应该检查/使用atributes of a number input。

如果您想完全控制输入，请使用只读字段并使用您自己的处理程序进行处理。这是一个使用event delegation 的sn-p。它使用数字输入字段中的step 属性进行加/减。

document.addEventListener('click', handle);

function handle(evt) {
  if (evt.target.dataset.numinput) {
    const inp = document.querySelector(`#num`)
    inp.value = ( +inp.value +  +(`${evt.target.dataset.numinput}${inp.step}`) )
      .toFixed(2);
  }
}

<input id="num" type="number" step="0.1" readonly/>
<button data-numinput="-"> - </button>
<button data-numinput="+"> + </button>

【讨论】：