javascript - 电话号码输入 - 当前已满时专注于下一个输入

Question

我希望为一个电话号码制作一组 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);
});

Answer 1

使用下面的例子来实现你想要的:

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