25

我的 CodePen： http ://codepen.io/leongaban/pen/cyaAL

我有一个电话号码输入字段，最多允许 20 个字符（对于国际号码）。

我还使用Josh Bush的Masked input jQuery 插件来格式化输入中的电话号码，使其“漂亮”。

在此处输入图像描述

  • 我的问题是，在电话为 10 位或更少的要求中，它应该使用 Masked 输入格式。

  • 但是，当电话号码超过 10 位时，格式应该被删除。


这是我当前的：CodePen， Cell Phone 是我尝试完成此操作的输入字段。工作电话是Mask 输入插件的默认功能示例。

你会如何解决这个问题？

手机输入框的jQuery：

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 回答
24

这非常有用，我只添加了一些代码以使其在用户删除某些字符时起作用，我提供了仅输入数字和最大长度的选项。这对我有用:)

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

于 2015-10-29T13:51:23.197 回答
7

在你的情况下

<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 引导插件

于 2018-01-23T06:34:01.953 回答
4

我尝试了一些非插件答案，但不幸的是它们在编辑电话号码时产生了不良的副作用。这是我最终创建的一个简单的解决方案，并且没有特殊的外部 3rd 方库依赖项：

  • 不需要任何插件 --> 只需要 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);
});
于 2017-02-16T00:32:02.593 回答
3

输入类型文本以输入类型电话号码。最大长度，使用 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">

于 2017-07-11T12:09:05.447 回答
2

检查下面的答案。

我为 TSP 代码（我的项目之一）创建，但类似的结构适用于电话号码。解决方案相当简单。
我正在将 KeyCode 用于以下解决方案。可以在此处找到有关密钥代码的更多信息。

 $(function () {
    $('#txtphonenumber').keydown(function (e) {
    var key = e.charCode || e.keyCode || 0;
    $text = $(this); 
       if (key !== 8 && key !== 9) {
          if ($text.val().length === 3) {
             $text.val($text.val() + '-');
          }
          if ($text.val().length === 7) {
             $text.val($text.val() + '-');
          }
       }
       return ((key >= 48 && key <= 57) || (key >= 96 && key <= 105) || key == 46 || key == 8 || key == 9 );
      // KeyCode from 48 to 57 are the Numeric characters
      // KeyCode from 96 to 105 are the numpad 0 to numpad 9
      // KeyCode delete 46
      // KeyCode backspace 8
      // KeyCode tab 9
  })
});
于 2019-12-06T21:00:17.083 回答
2

这是我的解决方案（适用于美国号码），可在您键入时使用

const maskPhoneNumber = (s) => {
  let o = '';
  o += s.length >= 3 ? `(${s.substring(0, 3)}` : s;
  o += s.length >= 4 ? `) ${s.substring(3, 6)}` : s.substring(3);
  o += s.length >= 7 ? `-${s.substring(6)}` : '';
  return o;
};
于 2020-01-21T01:02:58.660 回答
0

上面类似的解决方案，但在这个脚本中，格式是在用户输入的同时应用的。在电话号码中添加掩码 - 巴西电话格式 (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>

于 2018-09-12T21:03:23.933 回答
0

如果只想保留数字，则扩展为Roop Kumar答案

比添加替换(/\D/g,'')

$(this).val($(this).val().replace(/\D/g,'').replace(/^(\d{3})(\d{3})(\d+)$/, "($1)$2-$3"));

希望有帮助

于 2021-09-19T00:28:28.303 回答