使用 angularjs 在一定位数后插入连字符

Question

我想插入连字符来验证 ID 号。 例如，我的卡号格式类似于 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 没有捕获输入字段的 id 值。

Answer 1

 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"));

希望这可以帮助

Answer 2

如果您在ng-keypress keypress function （而不是this ）中传递$event ，则可以读取srcElement.id属性。