如何格式化电话号码或在不可编辑的HTML元素上添加特定掩码？

Question

我有一个网站，我允许访问者通过他们的手机登录。它们的数字在数据库中没有格式化存储。

如何在HTML元素中显示数字时格式化数字？我希望用户看到;例如; “您使用+ 1-541-754-3010登录”而不是15417543010。

我在这里和那里搜索但是我在输入数据时找到的用于屏蔽输入字段的所有解决方案，而不是在检索它时。

Answer 1

使用jQuery，你可以为它做一个功能

在函数中首先验证数字的大小，然后将其转换为数组，然后将格式应用于每组数字并将它们传递给辅助数组并返回值。

$(function(){
  $('input').keyup(function(){
    phoneFormat($(this).val())
  })
})

function phoneFormat(number){
  if(number.length == 11){
    var array = number.split('');
    var auxArray = []
    auxArray[0] = '+'+array[0]
    auxArray[1] = '-'+array[1]+array[2]+array[3]
    auxArray[2] = '-'+array[4]+array[5]+array[6]
    auxArray[3] = '-'+array[7]+array[8]+array[9]+array[10]
    number = auxArray.join("")
    $('span').text(number);
  }else{
    $('span').text("")
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input maxlength="11" type="text">
</div>
You are logged in using: <span></span>