javascript - 特殊点屏蔽输入 HTML-JavaScript

Question

我正在尝试使用 jQuery 和来自 Igor Escobar (http://igorescobar.github.io/jQuery-Mask-Plugin/) 的 themask 插件在 HTML 中实现特殊的屏蔽输入

我只需要写数字[0-9]和以下转换:

输入:

123456789

12345678

1234567

123456

期望的输出:

123.456.789

12.345.678

1.234.567

123.456

可以用那个插件实现吗？或者存在另一种方式来做到这一点？感谢阅读:)

编辑:

我是用另一个插件 (Numeral.js) 做的:http://numeraljs.com/

这是我的工作代码:

$("#myinput").blur(function() 
{
    this.value=numeral(this.value).format('0,0[.]00').replace(/\,/g, '.');
});

但我不喜欢在最后进行验证，即(onblur)，有什么办法可以即时执行此操作吗？ - 即逐渐验证(按键)。

Answer 1

您可能不需要图书馆。我保留了 jQuery，但它确实用于选择输入，因此您绝对可以很容易地抛弃它。

$("#myinput").keyup(function(){
  // prevent every character except numbers
  if(!this.value.slice(-1).match(/^[0-9]+\.?[0-9]*$/) ){
    this.value = this.value.slice(0, -1);
    return;
  }
  // remove the dots, split the string and reverse it
  var a = this.value.replace(/\./g, '').split('').reverse();

  // start from 3 and as long as there's a number 
  // add a dot every three digits.
  var pos = 3;
  while(a[pos] !== undefined){
    a.splice(pos,0,'.');
    pos = pos + 4;
  }  
  // reverse, join and reassign the value
  this.value = a.reverse().join('');
});

你可以自己试试 here 看看它是否完成了工作。希望对您有所帮助。

编辑:虽然上面的代码有效，但它有一些缺点，例如:

• 复制/粘贴时不起作用
• 不允许使用箭头键移动
• 光标总是移到输入的末尾，即使您在中间插入数字也是如此。

因为我需要它并全面支持这些案例，所以我在一个小脚本中改进了它，您可以在 Github 上找到它。以及演示和测试规范。