Использование масок ввода с частичным вводом - Javascript & Jquery - PullRequest
0 голосов
/ 30 января 2020

Я создал текстовое поле поиска телефона с маской ввода "(###) ### - ####". Я установил маску, чтобы разрешить частичный ввод номера телефона. Пользователь должен иметь возможность ввести любое из значений, чтобы найти в базе данных все подходящие для этого частичного номера телефона. Например: (___) ___-0197 должен искать последние четыре цифры 0197. Однако, как только поиск будет завершен, пользователь сможет перейти на страницу поиска и загрузить свои последние критерии поиска. У меня работает поиск, и маска работает, однако, когда я перезагружаю предыдущие критерии, телефонный номер перезагружается как (019) 7___-____ (вы можете ввести частично, нажав клавишу ->, чтобы go до точки, которую вы хотели бы введите ниже кодовую ссылку)

$(".Phone").inputmask({
  mask: "(###) ###-####",
});

function reload(initialPhone) {
  var x = document.getElementById("InitialPhone").value;
  document.getElementById("ReloadedPhone").value = x;
}

//$("#Phone").inputmask(["999-9999", "\\(999\\) 999-9999"], { "clearIncomplete": true, "placeholder": " " });

//$("#Phone").inputmask({
//    "mask": "(999) 999-9999",

//});
//$(document).ready(function () {
//$("#Phone").inputmask({
//    "mask": "(###) ###-####",
//    "type": "reverse",
//    "defaultValue": "##########" 
//    });
//});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>

<div class="col-auto noPaddingLeft">
  <label for="Phone" id="PhoneLabel" class="">Phone Number</label>
  <input type="text" class="form-control minWidth300 Phone" value="" name="Phone" id="InitialPhone" maxlength="15" />
</div>

<div class="col-auto noPaddingLeft">
  <label for="Phone" id="PhoneLabel" class="">Reload Phone Number</label>
  <input type="text" class="form-control minWidth300 Phone" value="" name="Phone" id="ReloadedPhone" maxlength="15" />
</div>

<button onclick=reload()>Reload Phone Number</button>

https://codepen.io/aminareh/pen/mdyZyZd

изображение перезагруженного телефона

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...