特殊的点屏蔽输入 HTML-JavaScript

Special dot masked input HTML-JavaScript

本文关键字：输入 HTML-JavaScript 屏蔽      更新时间：2023-09-26

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

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

输入：

123456789

12345678

1234567

123456

边形输出：

123.456.789

12.345.678

1.234.567

123.456

可以使用该插件实现这一点吗？还是存在另一种方式？感谢您阅读:)

编辑：

我使用另一个插件（数字.js）：http：//numeraljs.com/

这是我的工作代码：

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

但是我不喜欢在最后被验证，即（onblur），有什么办法可以即时做到这一点吗？ - 即逐步验证（按键）。

您可能不需要库。我保留了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('');
});

您可以自己尝试 这里 看看它是否可以完成这项工作。希望对您有所帮助。

编辑：虽然上面的代码可以工作，但它有一些缺点，例如：

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

由于我需要它并完全支持这些情况，所以我在一个小脚本中发展了它，你可以在 Github 上找到它以及演示和测试规范。

$("#myinput").on('keyup keydown blur', function() {
    this.value=numeral(this.value).format('0,0[.]00').replace(/',/g, '.');
}
相关文章：