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

我想知道如何设置一个输入字段（type=text）的样式，以便在数字之间显示空格和斜杠，如下所示：

.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}

我知道如何将输入限制为数字并执行验证。这不是我要问的。我想知道实际的显示。你能用CSS把前两个MM数字和后两个YY数字分开吗

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

---

（与不同的问题。该问题侧重于验证。）

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

---

或者，创建两个字段，并使用CSS将其样式设置为单个字段

您可以使用两个输入字段来完成此操作，删除输入字段的边框，向包装器元素添加边框以显示为一个输入，并在两者之间放置一个类似的位置

HTML

结果

这只是演示该想法所需的CSS，当然，您可以根据自己的喜好设置样式

---

我使用了

s，因为它们是内联元素，输入字段也是内联元素。

如果您只想查看样式，那么可以尝试以下方法：

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

正如您所想象的，您还可以将输入更改为select

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

顺便说一句，这样你就可以预览和玩了

此外，如果只需要一个字段，可以执行以下操作：

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

---

然后使用看起来很好的方法，这样你只需要一个字段就可以覆盖所有的基数

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

var字符计数
$（'#expiration'）。在（'input'，函数（e）上{
if（$（this.val（）.length==2&&characterCount<$（this.val（）.length）{
$（this.val（$（this.val（）+'/）；
}
characterCount=$（this）.val（）.length
});
这是我使用Regex的解决方案


const expdate='0421'；
const expDateFormatter=expdate.replace（//\//g，“”）。子字符串（0，2）+
（expdate.length>2？'/'：''）+
expdate.replace（//\//g，“”）子字符串（2,4）；
log（expDateFormatter）
no，不能用CSS实现。你需要用JS更新它，除非你使用多个输入，如@helpneider所说。你在找类似的东西吗@佛教徒：是的，这就是我想要的，只是更健壮。@Doug-如果你已经构建了一个更健壮的解决方案，你能分享一下吗？我正在寻找建立一个类似的好吧，我没有看到，因为我回答了这个问题。不管怎样，有什么问题吗？正如你所看到的，我正在重置你没有重置的样式，我不知道你是CSSChoosing的所有者，因为它回答了我关于使用单个输入字段获得所需结果的问题。这么简单的事情需要惊人数量的代码，但很多角落的案例都需要覆盖。后人发帖：@Doug这在android chrome中无法工作，因为keydown总是将keycode写成229或0
.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}

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