輸入框輸入值自動格式化,每4位加空格或-

<h3>這裏設置第四位開始加空格</h3>

<input data-gap=4 maxlength="14" size="14"    autocomplete="on" type="text" placeholder="請輸入卡號"/>

<button>獲取輸入值</button>
<script>
var input = document.querySelectorAll('input')[0];
var gap = parseInt(input.getAttribute('data-gap'));

input.oninput = function() {
  var numbers = this.value.replace(/[^\w]|/ig, '').split('')  ;   // 獲取原始值
//  var numbers = this.value.replace(/\s+/g, '').split('')     // 獲取原始值
  var back = '' ;

  numbers.forEach(function(n, i) {
    back += n + ((i + 1) % gap === 0 ? '-' : '') ;   // 處理加空格或-
  });

  var len = back.length;
  var last = back.charAt(len - 1);
   //if (last === ' ' || isNaN(last)) {
  if (last === ' ' || last === '-') {
    back = back.substring(0, len - 1) ;   // 移除末尾無用字符
  }

  this.value = back.toUpperCase();

  // 兼容處理
  setTimeout(function() {
    this.setSelectionRange(len, len);
    this.focus();
  }.bind(this), 0);
};
</script>