Блог

Я создаю поле ввода для номера телефона в веб-приложении .NET. Я хочу показать только первые и последние четыре цифры числа (например 0818****5678 ). У меня также есть скрытое поле для отображения полного номера без маски (081812345678).

В настоящее время у меня есть этот код. Когда пользователь нажимает на поле ввода, в нем отображаются все числа. Затем оно снова будет скрыто, когда пользователь покинет поле ввода.

Моя цель состоит в том, чтобы, если пользователь редактирует число, я хочу, чтобы часть поля ввода оставалась скрытой / замаскированной. В настоящее время я застрял и понятия не имею, как это сделать.

В последней части моего JS-кода я могу это сделать, если удалю ‘if’. Но ‘*’ также будет скопирован в скрытое поле.

Как мне решить эту проблему?

ASPX:

 <div class="form-group">
       <div class="caption">Phone Number:</div>
       <asp:TextBox ID="phone" CssClass="form-control" runat="server" />
       <asp:HiddenField ID="currentPhone" runat="server" />
</div>
 

JS:

 function maskedPhoneNumber(phoneNumber) {
    let firstDigits = phoneNumber.substring(0, 4);
    let lastDigits = phoneNumber.substring(phoneNumber.length - 4, phoneNumber.length);
    let maskedLength = phoneNumber.length - firstDigits.length - lastDigits.length;
    let maskedDigits = "";

    for (i = 0; i < maskedLength; i  ) {
        maskedDigits  = '*';
    }

    return maskedNumber = firstDigits   maskedDigits   lastDigits;
}

$('#<%=phone.ClientID %>').focus(function () {
      $('#<%=phone.ClientID %>').val($('#<%=currentPhone.ClientID %>').val());
});

$('#<%=phone.ClientID %>').blur(function () {
      if ($('#<%=phone.ClientID %>').val().indexOf('*') == -1) { //to avoid the * to be copied to the hiddenfield.
          $('#<%=currentPhone.ClientID %>').val($('#<%=phone.ClientID %>').val());
          $('#<%=phone.ClientID %>').val(maskedPhoneNumber($('#<%=phone.ClientID %>').val())); //to hide the field again
      }
});