如何在 html 输入的四个字符后插入 space？

Question

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

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

完成此任务的最佳方法是什么？

Answer 1

您可以使用 jquery 和掩码，请检查 jquery and mask 对于jquery你只需要戴上面具

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

check it

Answer 2

试试这个：

输入：

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

Answer 3

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

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

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

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

Answer 4

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>

如何在 html 输入的四个字符后插入 space？

How to insert space after four characters in html input?

html

javascript

text