Question

我需要带有手机屏幕的2个输入框。目前正在使用来自http://digitalbush.com/projects/masked-input-plugin/的maked输入。输入1位于我的页面正文中并按预期工作。

<input type="text" id= "s_id" name="s_id" class="form-control" 
placeholder="(xxx) xxx-xxxx">

以上标题：

<script type='text/javascript'>
$(window).load(function(){
$("#s_id").mask("(999) 999-9999");


$("#s_id").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;

        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + '-' + lastfour );
    }
});
}); 

</script>

我的问题是输入2，它位于Bootstrap弹出框中。

<input type="text" id= "phone" name="phone" class="form-control" 
placeholder="(xxx) xxx-xxxx">

我的逻辑步骤是创建具有不同输入ID的第二个脚本。

<script type='text/javascript'>
$(window).load(function(){
$("#phone").mask("(999) 999-9999");


$("#phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;

        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + '-' + lastfour );
    }
});
});

问题是第二个输入掩码在我的Bootstrap popover中不起作用。

我甚至尝试了http://www.jasny.net/bootstrap/javascript/#inputmask的第二个输入掩码脚本，但是对于输入2，掩码焦点位于输入框的末尾而不是输入框的第一个字符处。使用输入掩码脚本可以获得任何帮助。

Answer 1

在$(window).load上（当页面加载时），$("#phone")可能还不存在，因为它位于弹出框内，需要用户交互才能使用。所以你不能这样做：

$(window).load(function(){
  $("#phone").mask("(999) 999-9999");
})

但您可以使用bootstrap中的popover事件 - http://getbootstrap.com/javascript/#popovers-events

尝试这样的事情：

$('#myPopoverThatContainsPhone').on('shown.bs.popover', function () {
  $("#phone", this).mask("(999) 999-9999");
})

电话输入掩码输入从行尾开始

1 个答案: