CODEWITHSUNDEEP
jqueryhtmlcss
dan_vitch
dan_vitch

Reputation: 4559

Overflow text into next input field

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/

Upvotes: 0

Views: 307

Answers (2)

Jasper
Jasper

Reputation: 76003

//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/

Upvotes: 1

Grzegorz Rożniecki
Grzegorz Rożniecki

Reputation: 28015

Use jquery-autotab plugin.

<script type="text/javascript" src="jquery.autotab.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#dateSpinDay, #dateSpinMonth, #dateSpinYear').autotab_magic().autotab_filter('numeric');
});
</script>

And working JSFIddle: http://jsfiddle.net/AxUvu/1/

Upvotes: 1

Related Questions