javascript - javascript 中的正则表达式只允许数字和一个点后跟最多 2 个数字

Question

我想用 javascript 限制一个内容可编辑的单元格，只允许数字和一个点，点后最多 2 个数字

有效例子:

• 2
• 0.2
• 0.35
• .5
• .22
• 4.55
• 6.4
• 6546545.55

在我的例子中

function onlyNumberAndADot(element) {
  const invalidChars = /\D/g;
  ob = element.target;
    if (invalidChars.test(ob.textContent)) {
      ob.textContent = ob.textContent.replace(invalidChars, "");
    }
}

document.getElementById("test1").addEventListener("input", function(event) {
  onlyNumberAndADot(event);
})

#test1 {
  border: 1px solid gray;
  padding: 5px;
  width: 100px;
}

<table class="table">
  <tbody>
    <tr>
      <td id="test1" contenteditable="true"></td>
    </tr>
  </tbody>
</table>

仅在纯 javascript 中我正在尝试这个:[0-9]?(.+)?[0-9]{1,2} 但它不行，我不知道如何实现我的功能

not a correct example... because of number 6546545.55

Answer 1

每次你的事件处理程序运行时，输入都会增加一个字符，所以我认为更好的方法是检查输入是否仍然匹配你的正则表达式规则，如果不匹配，恢复以前的值并强制它模糊() .

尝试像这样更新您的事件处理程序，它应该可以工作:

let curValue = '';
function onlyNumberAndADot(event) {
  const valid = /^\d*\.?(?:\d{1,2})?$/;
  const text = event.target.textContent;  
  if (!valid.test(text)) {
    event.target.textContent = curValue;
    event.target.blur();
  } else {
    curValue = event.target.textContent;
  }
}

document.getElementById("test1").addEventListener("input", function(event) {
  onlyNumberAndADot(event);
});

document.getElementById("test1").addEventListener("blur", function(event) {
  event.target.textContent = event.target.textContent.replace(/\.$/,'');
});

我创建了一个 fiddle使用此解决方案并且它有效。

请注意，您必须暂时允许像“0.”这样的输入，否则用户将无法输入点，因此我对模糊事件进行了另一次验证，以删除最后的“.”