0

пишу типа маску... маска выглядит так (n1)-(n2) нужно сделать следующее: при вводе в поле, например: 12, должна превращаться в такое - (1)-(2) (сразу же), или если ввели 56, то (5)-(6)... я понимаю, что можно сделать так: .replace(/(\d)(\d)/, "($1)-($2)");... но проблема в том, что это все дело заменятся только после окончания ввода всех указанных символов в регэкспе... нужно так, например, ввели 3, заменяется на (3)-, ввели еще 4, заменяется все на (3)-(4)... то есть все на лету, как сделать?

1
  • Регулярные выражения здесь не нужны. Задействуйте следующие технологии: обработка событий ввода от пользователя; условный оператор; сложение строк.
    – ReinRaus
    27 мая 2015 в 18:54

3 ответа 3

1

Тут дело не в маске,а в обработчике события. Повесьтесь на keyup,и учтите то,что часть введенных данных уже обработана регуляркой

-1

Используйте событие input, оно возникает сразу при вводе (в отличие от change).

let test   = document.getElementById('test'),
    result = document.getElementById('result');
    
test.addEventListener('input', () => {
  let matches = test.value.match(/\d/g);
  if (!matches) {
    result.textContent = '';
    return;
  }
  if (matches.length > 1)
    result.textContent = '(' + matches.join(')-(') + ')';
  else
    result.textContent = '(' + matches[0] + ')';
});
#test,
#result {
  font: 18px sans-serif;
}
<input id='test'>
<br>
<span id='result'>

Упс... некропост :)

1
  • если не ошибаюсь, маска нужна внутри Input
    – Grundy
    12 мар 2018 в 7:55
-1

Люди, используйте современные технологии, типа реактивного программирования. Уходите от программирования на уровне слежения за событиями.

"use strict";
var app = new Vue({
  el: "#test-form",
  data: {
    input: "12"
  },
  computed: {
    result: function(){
      return this.input.replace(/(\d)(\d)/, "($1)-($2)");
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="test-form">
  <input type="text" v-model="input">
  <div>Вы ввели: {{input}}</div>
  <div>Вычислили: {{result}}</div>
</div>

1
  • реактивное программирование не такая уж и современная технология
    – Grundy
    12 мар 2018 в 7:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.