25

私の CodePen: http://codepen.io/leongaban/pen/cyaAL

最大 20 文字の電話番号の入力フィールドがあります (国際番号の場合)。

また、 Josh BushによるMasked input jQuery プラグインを使用して、入力の電話番号をフォーマットして「きれい」にしています。

ここに画像の説明を入力

  • 私の問題は、電話が 10 桁以下の場合の要件では、マスクされた入力形式を使用する必要があることです。

  • ただし、電話番号が 10 桁を超える場合は、フォーマットを削除する必要があります。


これが私の current: CodePenです。Cell Phone は、これを達成しようとしている入力フィールドです。Work Phone は、マスク入力プラグインのデフォルト機能の例です。

この問題にどう対処しますか？

jQuery for 携帯電話の入力フィールド:

case '2':
    console.log('created phone input');
    $('.new_option').append(myphone);
    $('.added_mobilephone').mask('(999) 999-9999? 9');
    $('.added_mobilephone').keypress(function(event){

      if (this.value.trim().length > 10) {
        console.log('this.value = '+this.value.trim());
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }

      /*if (this.value.length < 9) {
        console.log(this.value);
        console.log('less then 10');
        $('.added_mobilephone').mask('(999) 999-9999? 9999999999');
      } else if (this.value.length > 9) {
        console.log(this.value);
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }*/
    });
    break;
4

10 に答える 10

41 
$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d+)$/, "($1)$2-$3"));
});

これは確実に機能し、一度に完全な文字列の入力を適切に処理します (例: 1234567890)。

/* example jquery use */

$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d+)$/, "($1)$2-$3"));
});
/* use your css to beautify the form */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- form input for example user -->
<form>
  <input type="text" name="phone" placeholder="Phone Number" />
</form>

于 2016-05-06T07:09:56.633 に答える
34

この問題はおそらく既に解決されていますが、今後の参考のために、コントロールに複数のマスクを適用する必要がある他のユーザーが、このinputmask プラグインを検討する可能性があることに注意してください。

より多くのコールバック、設定、およびすぐに使用できる多くのマスク タイプがあります (拡張ファイルを確認してください)。コントロールに複数のマスクを定義することもでき、プラグインは値に基づいて適切なマスクを適用しようとします。

前のステートメントをデモするためのフィドルを次に示します。

$(window).load(function()
{
   var phones = [{ "mask": "(###) ###-####"}, { "mask": "(###) ###-##############"}];
    $('#textbox').inputmask({ 
        mask: phones, 
        greedy: false, 
        definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<input type='text' id='textbox' />

于 2013-11-22T21:12:24.100 に答える