將文本溢出到下一個輸入字段

Question

我目前有3個輸入，一個爲一天，一個爲一個月，一個爲年。我想讓它可以讓用戶輸入日期，而無需按Tab或點擊下一個輸入。用戶將能夠輸入12102011，並且它將正確填充到3個輸入字段中。我不確定最好的方法來做到這一點，如果它與jQuery，CSS或HTML。

這是HTML我有：

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

這裏是我開始與上面的代碼 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(); 
    } 
}); 

這裏是一個演示：http://jsfiddle.net/rJwyE/1/

Answer 2

使用jquery-autotab插件的小提琴。

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

和工作的jsfiddle：http://jsfiddle.net/AxUvu/1/