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

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

Answer 2

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

将文本溢出到下一个输入字段

2 个答案: