如何将电话号码屏蔽为 123-456-7890？

Question

在我的数据库中，我的电话号码为 123-456-7890 和 1234567890，有没有办法在我的文本框中格式化显示为 123-456-7890 格式

在我看来，我有电话文本框

 <input asp-for="PhoneNumber" type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" readonly class="form-control" id="PhoneNumber" placeholder="">

我需要将所有电话号码格式化为123-456-7890

我试过了：

function formatPhoneNumber(txt) {
  if (String(txt)[3] != "-") {
    txt = "" + txt.slice(0, 3) + "-" + txt.slice(3, 6) + "-" + txt.slice(6);
  }
  return txt;
}

在我的文本框中

<input asp-for="PhoneNumber"  type="tel" readonly pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" onchange="formatPhoneNumber(this)" class="form-control fa-mask" id="PhoneNumber" placeholder="">

Answer 1

这里有一个demo，展示了如何绑定111-111-1111格式的模型数据，以及当改变111-111-1111格式的输入时。 控制器：

public IActionResult Index()
        {
            TestReadOnly t = new TestReadOnly { PhoneNumber = "1231231234" };
            return View(t);
        }

查看：

    @model TestReadOnly
@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>
<input asp-for="PhoneNumber" type="tel" aria-label="Please enter your phone number" placeholder="ex. 111-111-1111" onchange="change()">
@section scripts{ 
    <script type="text/javascript">
        $(function () {
            //bind the data from Model with format 111-111-1111
            let txt = JSON.stringify(@Model.PhoneNumber);
            if (String(txt)[3] != "-") {
                txt = '' + txt.substring(0, 3) + "-" + txt.substring(3, 6) + "-" + txt.substring(6);
            }
            $('[type="tel"]').val(txt); 
        })
    //when change the input value,format 111-111-1111    
    function phoneMask() {
        var num = $(this).val().replace(/\D/g, '');
        $(this).val(num.substring(0, 3) +'-'+  num.substring(3, 6) + '-' + num.substring(6, 10));
    }
    $('[type="tel"]').keyup(phoneMask);
    </script>
}

结果：

Answer 2

如果要调用该函数，可以在input标签后面写<script>formatPhoneNumber("1234567890")</script>。

请注意，如果您在input 中写入(this)，则参数就是元素本身（在本例中为input）。

所以，如果你写(this)，只需稍微改变一下函数：

function formatPhoneNumber(el)
{
  let txt = el.value; // add this line
  if (String(txt)[3] != "-")
  {
    txt = '' + txt.slice(0, 3) + "-" + txt.slice(3, 6) + "-" + txt.slice(6);
  }
  //return txt // delete this line
  el.value = txt // add this line instead
}

如果你不通过input调用函数（这意味着你写<script>formatPhoneNumber(parameter)</script>），参数将是document.getElementById("PhoneNumber")。