代码之家 › 专栏 › 技术社区 › Liam neesan

如何在jquery中使用keyup事件生成破折号(“-”)?

jquery

Liam neesan · 技术社区 · 7 年前

我正在尝试使用jquery中的keyup事件创建类似于“12-1234-12-12-12345-123”的帐号。

我试过这个 stackoverflow link . 它每两个字符就工作一次。但我的情况有点不同。我的情况不是每两个字符。我得像这样划(—) 12-1234-12-12-12345-123

我在密码下面试过这个

$('#ContentPlaceHolder1_txtAccount1').keyup(function () {
    console.log("key press working");
    var foo = $(this).val().split("-").join(""); // remove hyphens

    var accSplit = $(this).val().split("-");
    if (accSplit.length == 0) {
        if (foo.length > 0) {
            foo = foo.match(new RegExp('.{1,2}', 'g')).join("-");
        }
    }
    if (accSplit.length == 1) {
        if (foo.length > 0) {
            foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
        }
    }
    $(this).val(foo);
});

2 回复 | 直到 7 年前

Twisty 7 年前

不确定这是否是最好的方法,但它确实创建了您要查找的字符串。考虑以下事项:

$(function() {

  function splitVal(v, a) {
    var str = [];
    if (a == undefined) {
      a = [2, 4, 2, 2, 5, 3];
    }
    var val = "" + v.split("-").join("");
    var vl = val.length;
    var i = a[0], j = i + a[1], k = j + a[2], l = k + a[3], m = l + a[4], n = m + a[5];
    console.log(val, vl);
    switch (true) {
      case vl <= i:
        str[0] = val;
        break;
      case vl <= j:
        str.push(val.slice(0, i));
        str.push(val.slice(i));
        break;
      case vl <= k:
        str.push(val.slice(0, i));
        str.push(val.slice(i, j));
        str.push(val.slice(j));
        break;
      case vl <= l:
        str.push(val.slice(0, i));
        str.push(val.slice(i, j));
        str.push(val.slice(j, k));
        str.push(val.slice(k));
        break;
      case vl <= m:
        str.push(val.slice(0, i));
        str.push(val.slice(i, j));
        str.push(val.slice(j, k));
        str.push(val.slice(k, l));
        str.push(val.slice(l));
        break;
      case vl <= n:
        str.push(val.slice(0, i));
        str.push(val.slice(i, j));
        str.push(val.slice(j, k));
        str.push(val.slice(k, l));
        str.push(val.slice(l, m));
        str.push(val.slice(m));
        break;
      case vl > m:
        str.push(val.slice(0, i));
        str.push(val.slice(i, j));
        str.push(val.slice(j, k));
        str.push(val.slice(k, l));
        str.push(val.slice(l, m));
        str.push(val.slice(m, n));
        break;
    }
    console.log(str)
    return str.join("-");
  }
  $('#ContentPlaceHolder1_txtAccount1').keyup(function() {
    $(this).val(splitVal($(this).val()));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ContentPlaceHolder1_txtAccount1" style="width: 200px;">

使用 switch() 我们可以根据字符串的不同长度有条件地创建一个数组。我们把它分成数组的不同部分。一旦数组被填充,我们就可以使用 .join() 在需要时插入“-”字符串。

希望有帮助。

Ayan_84 7 年前

这是我的版本,在一个数组中有预先定义的位置映射,然后根据这个数组位置添加“-”。

$('#ContentPlaceHolder1_txtAccount1').keyup(function () {
console.log("key press working");
var foo = $(this).val(); // Get Current Text Box Value
var hyphenPos=[3,8,11,14,20]//12-1234-12-12-12345-123 mapping hyphen positions
if($.inArray(foo.length,hyphenPos)>-1) // Check if we need to add hyphen
{
  var beforeHyphen=foo.substr(0,foo.length-1); // substring except last character
  var lastcharacter=foo.substr(foo.length-1,1); // last character
  var finalString=beforeHyphen+'-'+lastcharacter; // final result
  $(this).val(finalString); // show 
}

(});