特殊的點屏蔽輸入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('');
});

您可以在這里自己嘗試一下，看看它是否起作用。 希望能幫助到你。

編輯 ：雖然上面的代碼有效，但它有一些缺點，例如：

• 復制/粘貼時不起作用
• 它不允許使用箭頭鍵移動
• 即使您在中間插入數字，光標也始終會移至輸入的末尾。

當我需要針對這些情況的全力支持時，我將其開發成一個很小的腳本，您可以在Github上找到它以及演示和測試規范。

Answer 2

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