为MM-YYYY文本框自动插入“ - ”或“/”字符？

  • Z时代
  • 2024-01-10
  • 分类：问答

目前我正在使用CC验证模板，但不幸的是，使用标准的下拉/单独文本框来选择月份/年份到期字段并不适用于此特定项目。为MM-YYYY文本框自动插入“ - ”或“/”字符？

取而代之，我正在寻找一个文本框（格式为MM-YYYY）来捕获到期日期 - 但是，我正在写这个，以便客户不需要输入“ - ”或月/年条目之间的“/”。

取而代之的是，在客户输入“02”之后，连字符或斜杠应该在其后自动出现。如果客户在一年后退出，连字符/斜杠也应该被删除，从而允许他们轻松编辑他们的月份数据。

是否有任何体面的解决方案可以完成这项工作？或者它是你自己的一个案例？

回答：

请试试这个，我的日期 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); 
    } 
});

回答：

这是相当粗糙创建（但至少实现您的要求）。

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) {  
    \t enteredDate.textContent += inputMonth.value;  
    }  
    if ((inputMonth.value.length > 1) && (inputYear.value.length < 1)) {  
    \t if (document.activeElement === inputMonth) {  
    \t  enteredDate.textContent += '-';  
    \t  inputYear.focus();  
    \t }  
    \t else if (document.activeElement === inputYear) {  
    \t  inputMonth.focus();  
    \t }  
    }  
    if (inputYear.value.length > 0) {  
    \t enteredDate.textContent += '-';  
    \t 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>

以上是 为MM-YYYY文本框自动插入“ - ”或“/”字符？ 的全部内容， 来源链接： utcz.com/qa/259409.html

回到顶部