有没有办法阻止输入类型=“数字”获得多个点值？

Question

我想只获得1.5,0.56等十进制值，但它允许多个点。有没有办法阻止它

Answer 1

您可以使用pattern属性：

 <input type="number" pattern="[0-9]+([\.,][0-9]+)?">

它将允许带有单个点的图案，甚至是逗号（例如欧洲小数）。要删除逗号，应该是：

 <input type="number" pattern="[0-9]+([\.][0-9]+)?">

Answer 2

最初共享的here

您可以找到非常详细的说明in this Codepen

此解决方案很简单，并且在数字字段中仅允许一个点。这不会阻止在"."之前单击数字并添加数字。它不会阻止执行浏览器的键盘快捷键，例如刷新，复制和粘贴（只要粘贴的值是有效数字）以及其他功能。它将允许在数字的正文后面加上"."，但会删除超出设置限制的所有浮动。

我仍然无法阻止的唯一行为是，如果您反复按输入末尾的点号键，则该点将闪烁开和关。之所以会发生这种情况，是因为"13."的键入值是有效数字并返回"13"，而"13.."的键入值不是并且返回“”。在我的解决方案中，如果一个值返回""而没有按下退格键或删除键，则该值将回滚到从键入值"13"获得的最后一个有效值，即"13."。

我尝试过这样的解决方案：如果一次按下一个点，可以防止第二次触发该点，但是每次我设法在紧接一个已经存在的点之后紧紧按一下该点，然后什么也没有得到，除非我先按任何其他键，否则无法输入点。

我认为多次按下按钮闪烁是最好的解决方案，因为这样用户根本无法输入点并且什么也没发生。

let lastValidInputValue;
let selectedDot = false;


const onKeypress = (e) => {
  if (e.key === "." && e.target.value.indexOf(".") !== -1 && !selectedDot) e.preventDefault();
  selectedDot = false;

  if (e.key === "e") e.preventDefault();
};


const onInput = (e) => {
  if (
    e.target.value.indexOf(".") < e.target.value.length - e.target.getAttribute("data-toFixed") - 1 &&
    e.target.value.indexOf(".") !== -1
  ) {
    let newValue;
    newValue = e.target.value.slice(
      0,
      e.target.value.indexOf(".") +
        parseInt(e.target.getAttribute("data-toFixed")) +
        1
    );
    newValue = parseFloat(newValue);
    e.target.value = newValue;
  }
  if (e.target.value !== "") {
    lastValidInputValue = e.target.value;
  } else if (e.inputType.match(/delete/g)) {
    lastValidInputValue = "";
  } else {
    e.target.value = lastValidInputValue;
  }
};

 const onSelect = (e) => {
   if(window.getSelection().toString().indexOf(".") > -1) selectedDot = true;
 }

<input type="number" id="myNumber" name="myNumber" data-toFixed="2" step="any" onkeypress="onKeypress(event)" oninput="onInput(event)" onselect="onSelect(event)">

Answer 3

您可以使用JavaScript捕获输入值中的任何更改，并检查inputAsNumber属性是否仍然是有效数字。如果没有，您可以恢复到之前的值：

restoreData = {};

inp.oninput = preventTwoDots;
restoreData['inp'] = inp.value;

function preventTwoDots() {
    if (isNaN(this.valueAsNumber) && this.selectionStart) {
        this.value = restoreData['inp'];
    }
    restoreData['inp'] = this.value;
}

<input type="number" id="inp">

对selectionStart的额外检查确保您仍然可以删除所有数字：空输入被视为无效数字，但是无法从输入中删除最后一个字符会很奇怪。 / p>

说明

虽然这是您在问题中提出的要求，但请注意，阻止用户输入并不是特别方便用户。当输入无效时（例如，当您离开输入字段时提交值），浏览器会提供视觉线索，这通常是应该如何完成的。您不希望人们认为他们的键盘出现故障，或者让他们认为剪贴板是空的，因为他们的复制/粘贴“无效”。

Answer 4

我知道，那是旧的。我不确定您是否需要通过检查indexOf等使解决方案过于复杂...

我需要（以及在这里显示的内容）是限制用户输入（正/负）数字，最多2个小数，没有字母，没有双点或其他东西。

<input type="text" value="0"/>

$("input").on('input', function(e){
    let {value} = e.target;
    let processedValue = value
            .replace(/[^\d.\-]/, "")
            .replace(/^([\-]{0,1})(\d*)((\.\d{0,2}){0,1})(.*)$/g, "$1$2$3")
    $("input").val(processedValue);
  });

我的正则表达式可能有点粗糙，但是可以用。简而言之，它清除的不是数字和点的任何内容，然后仅包含点的第一部分。

Answer 5

我有最简单的代码来防止多个点，并且还可以防止其他一些无效值：

$('input[type=number]').on('keydown', function (e) {
    var keyCode = e.keyCode || e.which;

    if ((keyCode == 190 || keyCode == 110) && (e.currentTarget.validity) && (!e.currentTarget.validity.valid))
    {
        e.preventDefault();
        return false;
    }
});