電話入力マスクの入力は、行末で開始されます。

Question

電話マスク付きの2つの入力ボックスが必要です。現在、http://digitalbush.com/projects/masked-input-plugin/からの入力を使用しています。入力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です。

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

私の論理的なステップは、別の入力IDを持つ第2のスクリプトを作成することです。

<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); 
    } 
}); 
}); 

問題は、2番目の入力マスクがブートストラップポップオーバーで機能しないということです。

入力2の場合はマスクフォーカスが入力ボックスの最初の文字ではなく入力ボックスの最後にあることを除いて、正常に機能したhttp://www.jasny.net/bootstrap/javascript/#inputmaskから2番目の入力マスクスクリプトを試してみました。どちらの入力マスクスクリプトでも助けてください。

Answer 1

$(window).load（ページが読み込まれている）には、ユーザインタラクションが利用可能になるためのポップオーバーの内側にあるため、$("#phone")はおそらくまだ存在しません。

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

をしかし、あなたは、ブートストラップからポップオーバーイベントを使用することができます - http://getbootstrap.com/javascript/#popovers-events

をそして、このような何かを試してみてください：だから、あなたが行うことはできません

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