我目前正在使用 CC Validation 模板，但不幸的是，对于这个特定项目来说，使用标准下拉/单独的文本字段来选择月/年到期字段是不可行的。
相反，我希望有一个文本字段（格式为 MM-YYYY）来捕获到期日期 - 但是，我希望这样写，这样客户就不需要输入“-”或月/年条目之间的“/”。
相反，在客户输入“02”后，连字符或斜杠应自动出现在其后面。如果客户在一年中退格，连字符/斜杠也应该被删除，以便他们轻松编辑他们的月份数据。
是否有任何体面的解决方案可以做到这一点？还是自己动手？
【问题讨论】：
标签： javascript jquery
请试试这个，我为日期创建的 https://jsfiddle.net/dhruv1992/6fk8fb1v/
<input type="text" id="dateofbirth">
jquery
$("#dateofbirth").on('keyup',function(event){
var key = event.keyCode || event.charCode;
if (key == 8 || key == 46) return false;
var strokes = $(this).val().length;
if(strokes === 2 || strokes === 5){
var thisVal = $(this).val();
thisVal += '/';
$(this).val(thisVal);
}
});
【讨论】：
8 和 46 代表什么？我知道，但是下一个程序员会知道吗？当this.value.length 快数百倍时，为什么还要使用$(this).val().length？事实上，当你可以只做 this.value += "/"; 时，你正在创建 $(this) 三次，但除此之外，如果我想退格怎么办？我不能，因为你屏蔽了keyCode 8。基本上我要说的是，这对程序员和用户都非常不友好，这真的是一个相当大的成就......
这很粗略（但至少实现了您的要求）。
https://jsfiddle.net/justinwyllie/ntdwc1qt/
$('#cc').on('input', function() {
var v = $(this).val();
if (v.length == 2) {
$(this).val(v + '-');
}
if (v.length == 3) {
$(this).val(v.substring(0,2));
}
})
也许这与 dhruv gupta 的答案相结合，至少尝试检测击键？
【讨论】：
<input type="month" />工作完成。
【讨论】：
我喜欢 @31piy 有两个文本框的想法。
这是使用两个文本输入框的一种方法：
var inputMonth = document.querySelector('input[placeholder="mm"]');
var inputYear = document.querySelector('input[placeholder="yyyy"]');
var enteredDate = document.getElementsByTagName('p')[0];
function updateEnteredDate() {
enteredDate.textContent = '';
if (inputMonth.value.length > 0) {
enteredDate.textContent += inputMonth.value;
}
if ((inputMonth.value.length > 1) && (inputYear.value.length < 1)) {
if (document.activeElement === inputMonth) {
enteredDate.textContent += '-';
inputYear.focus();
}
else if (document.activeElement === inputYear) {
inputMonth.focus();
}
}
if (inputYear.value.length > 0) {
enteredDate.textContent += '-';
enteredDate.textContent += inputYear.value;
}
}
inputMonth.addEventListener('keyup', updateEnteredDate, false);
inputYear.addEventListener('keyup', updateEnteredDate, false);
window.addEventListener('load', function(){inputMonth.focus();}, false)p {
height: 72px;
margin: 0;
padding: 0;
line-height: 72px;
font-size: 72px;
font-weight: bold;
}<p></p>
<form>
<input type="text" size="2" maxlength="2" placeholder="mm" />
<input type="text" size="4" maxlength="4" placeholder="yyyy" />
</form>【讨论】：