如何在html输入中的四个字符后插入空格？

Question

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

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

最好的方法是什么？

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);
});

小提琴：https://jsfiddle.net/juspC/126/

Answer 2

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

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

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

https://stackoverflow.com/a/39804917/1895428

注意将替换整个值并始终将焦点放在输入末尾的简单解决方案：如果用户编辑他之前输入的内容可能会很烦人。

Answer 3

Vue 输入掩码

占位符格式

• '#' => 数字 (0-9)
• 'A' => 字母（a-z,A-Z）
• 'N' => 数字或字母（a-z,A-Z,0-9）
• 'X' => 任何符号
• '?' => 可选（下一个字符）

欲了解更多信息：Click here

// 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>

Answer 4

您可以使用 jquery 和掩码，请检查它jquery and mask 对于 jquery，你只需要放一个面具

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

check it