Automatically inserting “-” or “/” character for MM-YYYY textfields? [duplicate]

问题

I'm working on a CC Validation template at the moment, but using the standard dropdown/separate textfields for selecting the Month/Year expiration fields is unfortunately not on the cards for this particular project.

Instead, I'm looking to have one textfield (in the format MM-YYYY) for capturing the expiration date - however, I'm looking to write this so that a customer is not required to enter the "-" or "/" between the Month/Year entries.

Instead, after the customer types in say, "02", the hyphen or slash should automatically appear after it. If the customer then backspaces over the year, the hyphen/slash should also be removed, allowing for them to easily edit their month data.

Are there any decent solutions available which accomplish this? Or is it a case of rolling your own?

回答1:

please try this, I created for date 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);
    }
});

回答2:

This is pretty crude (but does at least implement your requirements).

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));  
    }


})

Maybe a combination of this and dhruv gupta's answer which at least tries to detect the keystrokes?

回答3:

<input type="month" />

Job done.

回答4:

I liked @31piy's idea of having two text boxes.

Here is one approach using two text input boxes:

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>

来源：https://stackoverflow.com/questions/41858073/automatically-inserting-or-character-for-mm-yyyy-textfields

标签

javascript

jquery