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

Posted 2023-04-14

【中文标题】如何在html输入中的四个字符后插入空格？

【英文标题】：How to insert space after four characters in html input?

【发布时间】：2015-02-28 08:18:56

【问题描述】：

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

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

最好的方法是什么？

【问题讨论】：

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

当用户输入时。

可以使用jquery Mask插件$("#phone").mask("9999 9999 9999 9999");

我使用了下面的代码：- var el = document.getElementById('checkout_card_number'); el.addEventListener('keyup', function () space(this, 4); );函数空间(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 + ' '; );

【参考方案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/

【讨论】：

OP 对 jquery 只字未提。

纯 JS 版本的代码：jsfiddle.net/v5d10w42（带有 oninput 事件）。

那里的纯 JS 版本不适合编辑/退格。

【参考方案2】：

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

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

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

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

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

【参考方案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>

【参考方案4】：

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

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

check it

【讨论】：

OP 对 jquery 只字未提。

仅供参考，这需要掩码插件。

扩展@sieppl 的评论 - 值得参考这样的图表来了解卡片模式：baymard.com/checkout-usability/credit-card-patterns