Вставьте дефис после определенного количества цифр, используя angularjs

Я хочу вставить дефис, чтобы подтвердить идентификационный номер. Например, формат номера моей карты будет примерно таким: 123 - 2342 - 1232321 - 1 (всего только 15 цифр), пользователю не разрешается вводить более 15 цифр. Мне нужно добавить дефис после того, как пользователь введет вышеуказанный набор цифр с пробелом до и после каждой цифры. Первый дефис должен быть добавлен после 3 цифр, второй дефис после ввода 4 цифр, третий дефис должен быть добавлен после ввода 7 цифр. Как я могу подтвердить это?

<div>
    <input type="text" id="tbNum" ng-keypress="addHyphen(this)"
           placeholder="Type some values here" />
</div>

$scope.addHyphen = function(element) {
    let ele = document.getElementById(element.id); // ele doesnt have id value
    ele = ele.value.split('-').join('');   

    let finalVal = ele.match(/.{1,3}/g).join('-');
    document.getElementById(element.id).value = finalVal;
};

Я попытался реализовать описанный выше способ, но element.id не фиксирует значение идентификатора поля ввода.


input angularjs hyphen
person Jennie Wilson    schedule 13.11.2019    source источник
comment
Вы хотите, чтобы экспортируемое значение включало дефисы (1234-456-1232321-1 против 12345678901232321)?   -  person Ambrown    schedule 13.11.2019
comment
Вы можете посмотреть маску ввода. это хороший способ достичь того, чего вы хотите.   -  person Nicolas    schedule 13.11.2019
comment
вместо того, чтобы передавать this, вы не можете передать $event и прочитать свойство srcElement?   -  person Jonathan Smith    schedule 13.11.2019
comment
Когда пользователь пытается ввести случайную цифру в поле ввода, дефисы должны добавляться автоматически (дефис должен добавляться после каждых 3 цифр, после 4 цифр, после 7 цифр и после 1 цифры)   -  person Jennie Wilson    schedule 13.11.2019

Ответы (1)


arrow_upward
1
arrow_downward 

function addHyphen(elem) {
  if (elem.value.length <= 17) {
    if (elem.value.length === 3) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 8) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 16) {
      elem.value = `${elem.value}-`;
    }
  } else {
    elem.value = elem.value.slice(0, -1)
  }
};
<div>
  <input type="text" id="tbNum" onkeypress="addHyphen(this)" placeholder="Type some values here" />
</div>

Вы можете использовать regex для этого, попробуйте ниже

Попробуйте что-то вроде ниже

$scope.addHyphen = function(element) {
  if (elem.value.length <= 17) {
    if (elem.value.length === 3) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 8) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 16) {
      elem.value = `${elem.value}-`;
    }
  } else {
    elem.value = elem.value.slice(0, -1)
  }
};

PS: регулярное выражение ниже также может помочь

let num = "123234212323211";
console.log(num.replace(/(\d{3})(\d{4})(\d{7})(\d{1})/, "$1-$2-$3-$4"));

Надеюсь это поможет

person Anand G    schedule 13.11.2019
comment
номер не жестко закодирован. Пользователь введет его вручную. это могут быть любые случайные числа. Просто дефис нужно добавлять после каждых 3 цифр, после каждых 4 цифр, после каждых 7 цифр. Я добавил это (123-2342-1232321-1) просто в качестве примера, чтобы показать формат. - person Jennie Wilson; 13.11.2019
comment
Я знаю. Я тоже добавил это в качестве примера. Все, что вам нужно сделать, это заменить его на element.value. Вы пробовали угловой код, которым я там поделился? - person Anand G; 13.11.2019
comment
Да, но это не работает. Не могли бы вы добавить скрипку $scope.addHyphen = function(element) { let ele = element.target.id; finalVal = ele.value.replace(/(\d{3})(\d{4})(\d{7})(\d{1})/, $1-$2-$3-$4); element.target.value = finalVal; }; Дефис должен добавляться автоматически после того, как пользователь закончит вводить 3 цифры (123-), второй дефис будет добавлен автоматически, как только пользователь введет следующие 4 цифры (123-4321-), третий дефис будет добавлен автоматически, как только пользователь введет следующие 7 цифр. цифры ( 123 - 4321 - 1234321 - ), а последняя цифра будет однозначной - person Jennie Wilson; 13.11.2019
comment
Я отредактировал ответ. Решение вашей проблемы - это регулярное выражение, которое я дал. Теперь, как вы его используете, зависит от вас! - person Anand G; 13.11.2019
comment
Нет... Вы не понимаете моего вопроса. Дело в том, что дефис должен добавляться автоматически после 3, 4 и 7 цифр. В вашем коде вы оцениваете после ввода всех 15 цифр - person Jennie Wilson; 13.11.2019
comment
Идеальный!! Спасибо большое :) - person Jennie Wilson; 13.11.2019
comment
Можем ли мы добавить пробел до и после дефиса? - person Jennie Wilson; 14.11.2019
comment
Просто добавьте пробел перед дефисом, например ${elem.value} - - person Anand G; 14.11.2019
comment
Добавление пробела не сработало, так как он считает пробел также одним символом. Но я нашел решение для этого, большое спасибо за помощь. - person Jennie Wilson; 15.11.2019