如何设置信用卡到期日期输入字段的样式以包含空格和正斜杠？答案

【问题标题】：How to style a credit card expiration date input field to include spaces and forward slash?如何设置信用卡到期日期输入字段的样式以包含空格和正斜杠？
【发布时间】：2014-10-31 11:04:57
【问题描述】：

我想知道如何设置一个输入字段（类型 = 文本）以在数字之间显示空格和斜线，如下所示：

我知道如何将输入限制为数字并执行验证。这不是我要问的。我想知道实际的显示。你能以某种方式使用 CSS 来做到这一点，将前两个 MM 数字与最后两个 YY 数字分开吗？

我希望用户只能输入 4 位数字并将其显示为：MM / YY

（与How to format credit card input fields and expiry date 不同的问题。该问题侧重于验证。）

【问题讨论】：

不，不能用 CSS 做到这一点。你需要用 JS 更新它，除非你像@HelpNeeder 说的那样使用多个输入。
您在寻找类似的东西吗？ jsfiddle.net/zoj2de8p/2
@BuddhistBeast：是的，这就是我想要的，只是更强大。
@Doug - 如果你已经建立了一个更强大的解决方案，你能分享一下吗？我正在寻找建立一个类似的

标签： javascript css input credit-card

【解决方案1】：

读取前几个字符并将它们保存到变量中。然后读取最后一个字符，并将它们写入其他变量...然后与它们之间的空格连接。

How can I get last characters of a string using JavaScript

Retrieve first 2 characters of this.title attribute, and call corresponding id

或者，有 2 个字段并使用 CSS 设置它们的样式，使其看起来像一个字段。

【讨论】：

选择它是因为它回答了我关于使用单个输入字段获得期望结果的问题。这么简单的事情需要大量的代码，但必须涵盖许多极端情况。后人发帖：jsfiddle.net/nirodhasoftware/pgfcpxeb
@Doug 这无法在 android chrome 中工作，因为 keydown 将始终将键码写为 229 或 0

【解决方案2】：

您可以使用两个输入字段来完成此操作，删除输入字段的边框，将边框添加到包装器元素以显示为一个输入，并在两者之间放置一个/，就像这样。 - jsFiddle Demo

HTML

 <span class="expiration">
    <input type="text" name="month" placeholder="MM" maxlength="2" size="2" />
    <span>/</span>
    <input type="text" name="year" placeholder="YY" maxlength="2" size="2" />
</span>

CSS

.expiration {
    border: 1px solid #bbbbbb;
}
.expiration input {
    border: 0;
}

结果

这只是演示这个想法所需的 CSS，当然你可以随意设置它的样式。

我使用了<span>s，因为它们是内联元素，输入字段也是。

【讨论】：

【解决方案3】：

如果您只寻找样式，这是一个非常简单的技巧，试试这个：

<div class="fakeinput">
    <input type="text" size="2" class="mini_input" />
    <div class="slash">/</div>
    <input type="text" size="2" class="mini_input" />
</div>

然后是这样的 CSS：

.fakeinput{display:block; border:1px solid #ccc; background:#f9f9f9; width:50px;}
.fakeinput *{display:inline-block; color:#555; vertical-align:middle}
.mini_input{width:15px; font-size:10px; border:none; background:none; box-shadow:none; padding: 3px 0 5px 5px}

如您所想，您还可以将输入更改为 select 。

话虽如此，出于用户体验的目的，我会避免这样做，我认为最好为用户提供正确的日期格式，这样您就可以避免以后出现问题，但当然，这只是一个意见

顺便说一句，here's a fiddle 这样你就可以预览和玩了

另外，如果你只想要一个字段，你可以这样做：

<input name="date" type="text" value="/" onblur="if (this.value=='') this.value = '/'"   onfocus="if (this.value=='some text') this.value = ''"  />

然后使用BuddhistBeast's solution，它看起来真的很不错，这样你就可以用一个字段覆盖所有基础

【讨论】：

好吧，我没有看到，因为我正在回答这个问题。无论如何，有什么问题？如您所见，我正在重置您没有的样式，我不知道您是 CSS 的所有者

【解决方案4】：

我的解决方案是在输入 2 个字符后添加一个斜杠。这就是我来这里寻找的东西，希望能帮助其他人。

var characterCount
$('#expiry').on('input',function(e){
    if($(this).val().length == 2 && characterCount < $(this).val().length) {
        $(this).val($(this).val()+'/');
    }
    characterCount = $(this).val().length
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="expiry" type="text" />

【讨论】：

我没有看到 jquery 标签，所以你能在 javascript 中提供这个吗？

【解决方案5】：

这是我使用正则表达式的解决方案。

const expdate = '0421';
const expDateFormatter = expdate.replace(/\//g, "").substring(0, 2) + 
  (expdate.length > 2 ? '/' : '') + 
  expdate.replace(/\//g, "").substring(2, 4);
  
console.log(expDateFormatter)

【讨论】：