How to make dash("-") using keyup event in jquery?

Question

I am trying to make an account number like this "12-1234-12-12-12345-123" using keyup event in jquery

I tried this stackoverflow link . it works for every two characters. But my case is a little bit different. My case is not every 2 characters. I have to make a dash("-") like this 12-1234-12-12-12345-123

I tried this below code

$('#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);
});

https://www.npmjs.com/package/inputmask – Robert Harvey Jan 05 '19 at 06:41 — Robert Harvey, Jan 05 '19 at 06:41

Twisty · Accepted Answer · 2019-01-05T08:11:50.927

Not sure if this is the best method, yet it does create the string you're looking for. Consider the following:

$(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;">

Using switch() we can conditionally create an array based on different lengths of the string. We break it into different parts of an array. Once the array is populated, we can use .join() to insert the "-" String where needed.

Hope that helps.

your code is working, can you help me with backspace,if user want to change, it is not working good. you try one time with back space — Liam neesan, Jan 05 '19 at 08:08
only the last dash"-" is not working when I press back space — Liam neesan, Jan 05 '19 at 08:11
@Liamneesan you're welcome. I updated the code a bit to allow for adjustable formats. — Twisty, Jan 05 '19 at 08:13

score 1 · Answer 2 · answered Jan 05 '19 at 06:54

Here is my version, with predefined position mapping in an Array and then adding '-' according to this array position,

$('#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 
}

});

How to make dash("-") using keyup event in jquery?

2 Answers2