手机数字键盘千变万化，数字小数输入有窍门

在移动端开发中，拉起系统自带的键盘是再常见不过的操作了。而最近，笔者接到一个需求，需要拉起数字键盘，只允许用户输入数字和小数点，并且在用户失去焦点时，对输入框的内容进行千分位格式化，同时在聚焦时还可以删除。

乍一看，这几个需求似乎并不复杂，但想要实现起来却并非易事。针对此需求，笔者考虑了三种方案，建议大家选择第二种。

方案一：利用键盘本身的限制

这种方案是最直接的，也是最容易想到的。我们可以通过设置键盘的类型为“数字键盘”来限制用户的输入。但是，这种方案存在一个致命的问题：它无法限制用户输入小数点。

方案二：利用JS事件监听输入值

这种方案相对来说要复杂一些，但是它可以完美地解决方案一中的问题。我们可以通过JS事件监听输入框的输入值，并在用户输入非数字或小数点时，将其删除。此外，我们还可以通过JS事件监听输入框失去焦点时的事件，在用户失去焦点时，对输入框的内容进行千分位格式化。

方案三：利用正则表达式

这种方案与方案二类似，但它使用正则表达式来限制用户的输入。正则表达式是一种强大的工具，它可以用来匹配各种各样的字符串。我们可以使用正则表达式来匹配数字和小数点，并在用户输入非数字或小数点时，将其删除。

经过对比，笔者认为方案二是最合适的。它不仅可以完美地解决需求中的所有问题，而且实现起来也相对简单。

下面是方案二的具体实现代码：

// 获取输入框元素
var input = document.getElementById("input");

// 添加键盘输入事件监听器
input.addEventListener("input", function() {
  // 获取输入框中的值
  var value = input.value;

  // 使用正则表达式匹配数字和小数点
  var reg = /(^[1-9]([0-9]+)?(\.[0-9]+)?$)|(^(0){1}$)|(^[0-9]\.[0-9]+$)/;

  // 如果输入框中的值不匹配正则表达式
  if (!reg.test(value)) {
    // 删除输入框中的值
    input.value = "";
  }
});

// 添加失去焦点事件监听器
input.addEventListener("blur", function() {
  // 获取输入框中的值
  var value = input.value;

  // 对输入框中的值进行千分位格式化
  input.value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});

以上就是关于如何限制用户在移动端只能输入数字和小数点的实现方案。希望对大家有所帮助。