MM-YYYYテキストフィールドに " - "または "/"文字を自動的に挿入しますか？

Question

私は現時点でCCバリデーションテンプレートを作成していますが、標準ドロップダウン/別のテキストフィールドを使用して月/年の有効期限フィールドを選択することは残念ながらこの特定のプロジェクトのカードではありません。

代わりに、有効期限をキャプチャするための1つのテキストフィールド（MM-YYYYの形式）を使用したいと考えていますが、これを書いて顧客に " - "月/年の間に "/"を付けます。

代わりに、顧客が「02」と入力すると、その後ろにハイフンまたはスラッシュが自動的に表示されます。その後、顧客が年を越えてバックスペースをとっている場合は、ハイフン/スラッシュも削除して、月データを簡単に編集できるようにする必要があります。

これを達成するための適切な解決策がありますか？それともあなた自身のものを転がす場合ですか？

Answer 1

はこれを試してみてください、私は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); 
    } 
}); 

Answer 2

これはかなりの粗であるために作成された（しかし、少なくとも、あなたの要件を実装ん）。たぶん

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の答えは？仕事が終わっ

Answer 3

<input type="month" />

。

Answer 4

私は@ 31pyの2つのテキストボックスを持っていると思っていました。ここで

2つのテキスト入力ボックスを使用して一つのアプローチは以下のとおりです。次の2つのテキストボックスがあり、それらをマージしていないのはなぜ

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>