Question

I currently have 3 inputs, one for day, one for month and one for year. I want to make it so a user can type in the date without pressing tab or clicking in next input. The user would be able to type 12102011 and it would populate correctly into the 3 input fields. I am not sure the best way to do this, if its with jquery, css or html.

This is the html I have:

<div>
    <input class="dateSpinDay" type="text" maxlength="2"/> 
    <span>/</span> 
    <input class="dateSpinMonth" type="text" maxlength="2"/> 
    <span>/</span> 
    <input class="dateSpinYear" type="text" maxlength="4"/>  
</div>

here is the fiddle I start with the above code
http://jsfiddle.net/dan_vitch/AxUvu/

Answer 1

//force only numeric characters in all the text-boxes
$('.dateSpinDay, .dateSpinMonth, .dateSpinYear').on('keyup', function () {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
});

//focus the month text-box if the value of the day text-box is 2 characters
$('.dateSpinDay').on('keyup', function () {
    if (this.value.length >= 2) {
        $('.dateSpinMonth').focus();
    }
});

//focus the year text-box if the value of the month text-box is 2 chracters
$('.dateSpinMonth').on('keyup', function () {
    if (this.value.length >= 2) {
        $('.dateSpinYear').focus();
    }
});

Here is a demo: http://jsfiddle.net/rJwyE/1/