如何在 HTML 输入框中每四个字符后插入空格？

Question

我需要在用户使用JavaScript输入信用卡号时，在每四个字符后插入一个空格。

<input type="text" size="19" maxlength="19" data-stripe="number" placeholder="1234 5678 9012 3456">

什么是最好的方法来实现这个？

- soniya soniya

---

当你说“空格”时，你实际上是指空格吗？ 空白字符是任何间距字符，例如空格、制表符和换行符。 当你说你需要“给”空间时，我想你想要将它们插入文本框中的值，但你是指在用户输入时还是在获取值时？ - Guffa

当用户正在输入时。 - soniya soniya

您可以使用jQuery Mask插件 $("#phone").mask("9999 9999 9999 9999"); 来实现电话号码的掩码。 - Vladu Ionut

我使用了以下代码： var el = document.getElementById('checkout_card_number'); el.addEventListener('keyup', function () { space(this, 4); });function space(el, after) { after = after || 4; var v = el.value.replace(/[^\dA-Z]/g, ''), reg = new RegExp(".{" + after + "}","g") el.value = v.replace(reg, function (a, b, c) { return a + ' '; }); } - soniya soniya

Answer 1

请尝试以下内容：

输入：

<input type="text" maxlength="19" class="text" />

jQuery：

$('.text').on('keyup', function() {
  var foo = $(this).val().split(" ").join(""); 
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,4}', 'g')).join(" ");
  }
  $(this).val(foo);
});

fiddle: https://jsfiddle.net/juspC/126/

- vaneayoung

---

OP没有提到jQuery。 - nicael

JavaScript代码的简化版本：http://jsfiddle.net/v5d10w42/ （包含oninput事件）。 - dfsq

纯JS版本不适合编辑/回退。 - agm1984

Answer 2

我看到您正在使用Stripe。他们提供了一个很好的插件，可以完全满足您的需求。请注意，您可以在不使用Stripe的情况下使用此插件：

https://github.com/stripe/jquery.payment

如果您正在寻找一个纯JavaScript且轻量级的版本，我创建了一个可以支持美国运通格式（15位）以及Visa、MasterCard和其他信用卡（16位）的版本。

https://dev59.com/GFoV5IYBdhLWcg3wL8aw#39804917

注意那些简单的解决方案，它们会替换整个值并总是将焦点放在输入的末尾：如果用户编辑之前输入的内容，这可能会很烦人。

- pmrotule

Answer 3

Vue输入掩码

占位符格式

• '#' => 数字（0-9）
• 'A' => 任何大小写字母（a-z，A-Z）
• 'N' => 数字或字母（a-z，A-Z，0-9）
• 'X' => 任何符号
• '?' => 可选的（下一个字符）

更多信息：点击这里

// Use as plugin
Vue.use(VueMask.VueMaskPlugin);

new Vue({
  el: '#app',
  data: {
    mask_time: '##:##',
    mask_price:'###,###,###',
    mask_4s:'#### #### #### ####',
    
    placeholder_time: '23:45', 
    placeholder_4s:'1234 1234 1234 1234',
    placeholder_price: '123,123,123',
    
    time: '',  
    fourspace: '',
    price:'',

  }
})

.main{
    display: flex;
    flex-direction: column;
    }

<div id="app">
  <div class="main">
    Type time here:
    <input type="text" v-mask="mask_time" v-model="time" :placeholder="placeholder_time">
     Type 4 Space here:
     <input type="text" v-mask="mask_4s" v-model="fourspace" :placeholder="placeholder_4s">
      Enter price here:
     <input type="text" v-mask="mask_price" v-model="price" :placeholder="placeholder_price">
  </div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>

- KING-CODE

Answer 4

您可以使用jQuery和遮罩实现它，请检查 jQuery和遮罩，对于jQuery，您只需要放置一个遮罩即可。

$("#date").mask("9999 9999 9999 9999");

查看它

- marjes

---

OP没有提到jQuery。 - nicael

请注意，这需要使用遮罩插件。 - Jeremy A. West

扩展@sieppl的评论 - 值得参考此类卡模式的图表：https://baymard.com/checkout-usability/credit-card-patterns - Aaron Lavers