web-dev-qa-db-ja.com

入力時に入力の電話番号形式を変更する方法は？

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

電話番号の入力フィールドがあり、20文字まで入力できます（国際電話番号の場合）。

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

enter image description here

  • 私の問題は、電話が10桁以下の場合の要件では、マスク入力フォーマットを使用する必要があることです。

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


ここに私の現在の状況があります： CodePen 勤務先電話は マスク入力プラグイン のデフォルト機能の例です。

この問題についてどのように対処しますか？

jQuery for Cell Phone入力フィールド：

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;
jqueryinputformattingphone-numbermaskedinput
19
Leon Gaban

おそらくこの問題はすでに解決しているでしょうが、今後の参考のために、コントロールに複数のマスクを適用する必要がある他の人がこの inputmask plugin を探索したいと思うかもしれません。

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

ここにフィドルがあります 前のステートメントをデモするには：

$(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' />
23
Kevin
$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "($1)$2-$3"));
});

これは確かに動作します:)

/* 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>
31
Roop Kumar

これは非常に役立ちました。ユーザーが文字を削除したときに機能するようにコードを追加するだけで、数字と最大長のみを入力するオプションを提供しました。これは私のために働く:)

$(document).ready(function(){
  /***phone number format***/
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val();
    if (curchr == 3 && curval.indexOf("(") <= -1) {
      $(this).val("(" + curval + ")" + "-");
    } else if (curchr == 4 && curval.indexOf("(") > -1) {
      $(this).val(curval + ")-");
    } else if (curchr == 5 && curval.indexOf(")") > -1) {
      $(this).val(curval + "-");
    } else if (curchr == 9) {
      $(this).val(curval + "-");
      $(this).attr('maxlength', '14');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="phone-format"  type="text" placeholder="Phone Number">
17
Atif Tariq

あなたの場合

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<input type="text" class="form-control" data-mask="(999) 999-9999">

jasny bootstrap プラグイン

3
Orlando

プラグイン以外の回答をいくつか試しましたが、残念ながら電話番号を編集するときに望ましくない副作用がありました。ここに私が作成した解決策がありますが、それは簡単で、特別な外部サードパーティのlib依存関係はありません：

  • プラグインは不要-> JSとJQueryのみ
  • 非数字（ノイズなど）を自動的に除去します
  • 数字の削除時に電話番号の数字を左にシフトします
  • フォーマットを維持する/削除しても破損しない
  • 何も変わらなければ何もしませんカーソルを左右に移動して、カーソルを最後まで固定したままにしていた他のソリューションと比較して、変更を加えることができます

警告：考慮される電話番号は北米のみです。これはカナダの地域コミュニティのサッカー登録に使用されたため、私の場合は問題ありませんでした。

$("input[name='phone_num']").keyup(function() {
  var val_old = $(this).val();
  var val = val_old.replace(/\D/g, '');
  var len = val.length;
  if (len >= 1)
    val = '(' + val.substring(0);
  if (len >= 3)
    val = val.substring(0, 4) + ') ' + val.substring(4);
  if (len >= 6)
    val = val.substring(0, 9) + '-' + val.substring(9);
  if (val != val_old)
    $(this).focus().val('').val(val);
});
3
nikolaosinlight

上記と同様の解決策ですが、このスクリプトでは、ユーザーが入力している間に形式が適用されます。電話番号にマスクを追加する-ブラジルの電話形式（00）？0000-0000他の人にも役立ちます。

    //Add mask (00) ?0000-0000 in the phone number - Brazil Format
    $('#iTel').on("keyup blur", function(e){
        var v = $(this).val();
        v = v.replace(/[^\d]/g,'');
        if(v.length < 6){
                v = v.replace(/(\d{2})/, '($1) ');
        }else if(v.length < 10){
                v = v.replace(/(\d{2})(\d{4})/, '($1) $2-');
        }else if(v.length < 11){
                v = v.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');                           
        }else {
                v = v.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
        }
    $(this).val(v);             
       });
    <!DOCTYPE html>
     <html lang="en">
     <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
    <form method="post" id="cadForm" action="incluir.php">
    <div class="form-row">
     <div class="form-group col-md-12">
        <label for="iTel" class="col-form-label">Phone</label>
        <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
        <input type="text" class="form-control" name="iTel" id="iTel" maxlength="15" placeholder="(xx) ?xxxx-xxxx..." pattern="[(][0-9]{2}[)][\s][0-9]{4,5}[-][0-9]{4}$" title="Please, type only number: (00) ?0000-0000">
        </div>                    
    </div>
      </body>
     </html>
0
CarlosE

入力タイプの電話番号に入力タイプのテキスト。 jqueryを使用した最大長のプレースホルダー。

// Used to format phone number and add placeholder and max-length
function phoneFormatter() {
 $(' input[type="text"]').attr({ placeholder : '(___) ___-____' });
  $('input[tabindex="111"]').on('input', function() {
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length == 7) {
      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
    } else if (number.length == 10) {
      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
     
    }
    $(this).val(number)
    $('input[type="text"]').attr({ maxLength : 10 });
    
  });
};

$(phoneFormatter);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input_111[]" value="" tabindex="111">
0
Musaib Memdu