特殊点掩码输入 HTML-JavaScript

Posted 2023-04-14

【中文标题】特殊点掩码输入 HTML-JavaScript

【英文标题】：Special dot masked input HTML-JavaScript

【发布时间】：2014-11-13 04:10:51

【问题描述】：

我正在尝试使用来自 Igor Escobar (http://igorescobar.github.io/jQuery-Mask-Plugin/) 的 jQuery 和 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），有什么方法可以即时执行此操作吗？ - 即逐步验证（按键）。

【问题讨论】：

$('.yourclass').mask('099.099.099.099'); ?

感谢您的回答，但如果输入为“12345678”，则该代码会导致此“123.456.78”，而我想要“12.345.678”

使用keyup 而不是blur。

@MelanciaUK 当我这样做时会发生一些奇怪的事情。试试看。

【参考方案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 上找到它以及演示和测试规范。

【讨论】：

不错，没有插件，只有 jQuery！聪明！

【参考方案2】：

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

【讨论】：

当我这样做时会发生一些奇怪的事情。尝试一下。并且，请添加“）；”到代码的最后。