电话号码输入 - 当电流充满时,关注下一个输入

时间:2015-07-14 20:49:33

标签: javascript jquery html forms

我希望为一个电话号码设置一组3个表单输入,当第一个数字已满时自动关注下一组数字。

我的表单是HTML字符串:

myLayer.eachLayer(function(layer) {

     // here you call `bindPopup` with a string of HTML you create - the feature
     // properties declared above are available under `layer.feature.properties`

var content = '<div class="tooltip-header">Store Name<\/div>' +
              '<div class="tooltip-address">' + layer.feature.properties.address1 + '<div\/>' +
              '<div class="tooltip-address">' + layer.feature.properties.address2 + '<div\/>' +
              '<br>'+
              '<div class="tooltip-phoneLabel">' + layer.feature.properties.phoneLabel + '<div\/>'+
              '<br>'+
              '<div class="phone-input">'+
              '<input class="phone-input" name="phone-input" type="tel" size="3" maxlength="3" placeholder="555">  '+
              '<input class="phone-input" name="phone-input" type="tel" size="3" maxlength="3" placeholder="555">  '+
              '<input class="phone-input" name="phone-input" type="tel" size="4" maxlength="4" placeholder="5555">'+
              '<\/div>';

     layer.bindPopup(content);
});

1 个答案:

答案 0 :(得分:3)

使用以下示例来实现您的目标:

$(document).ready(function(){

    $('body').on('keyup', 'input.phone-input', function(){
        if($(this).val().length === this.size){
            var inputs = $('input.phone-input');
            inputs.eq(inputs.index(this) + 1).focus();
        }
    });

});

DEMO