CODEWITHSUNDEEP
jquery
smile
smile

Reputation: 35

jQuery- How to append (-) in input

I want to create an input for activation code.My value like xxxx-xxxx-xxxx and don't like to use multiple input for solution.

This mean,when it's value length inserted equal 4,it will automatically append a(-)between them.

Then, If user paste code xxxxxxxxxxxx, it will automatically change into xxxx-xxxx-xxxx

So, how conditions that I have to implement to do it in single input because many time I have attempted through logically,but failed to create a working and professional one.

html:

<input type="text" class="activation_code"/>

//the below is not practice way and professional,so how the better way to do that.Thanks :)

$('.activation_code').keyup(function(){
  var value = $(this).val();
      if(value.length == 4){
         $(this).val(value+'-');
      }
      if(value.length == 9){
         $(this).val(value+'-');            
      }    
});

Upvotes: 0

Views: 37

Answers (3)

connexo
connexo

Reputation: 56754

This is how I'd do it. You can specify the groupsize (the number of characters after which you want your -), and also the "divider" char that you want inserted.

function convertTheInput(value, groupSize, dividerChar) {
  groupSize = groupSize || 4;
  dividerChar = dividerChar || "-";
  var newValue = "";
  value = value.split(dividerChar).join("");
  for (var i = 0; i < value.length; i++) {
    if (i % groupSize === 0 && i > 0) {
      newValue += dividerChar;
    }
    newValue += value[i];
  }
  return newValue;
}

$(document).ready(function() {
  $("#theInput").on("keyup", function() {
    $(this).val(convertTheInput($(this).val(), 4, "-"));
  });
  $("#theInput2").on("keypress", function() {
    $(this).val(convertTheInput($(this).val(), 3, " "));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="theInput" /> keyup, groupsize 4, "-" <br />
<input type="text" id="theInput2" /> keypress, groupsize 3, " "

https://jsfiddle.net/es2qpkzc/6/

Upvotes: 1

Hackerman
Hackerman

Reputation: 12305

This way supports paste text on the input:

$(function(){
var test = $("#test");
  test.keyup(function(){
    var texto = $(this).val().split('-').join('');
    $(this).val(texto.match(/.{1,4}/g).join('-'));
  });
  test.on('paste',function(){
    var element = this;
      setTimeout(function () {
        var texto = $(element).val();
        $(element).val(texto.match(/.{1,4}/g).join('-'));
      }, 100);      
  });
});

Working fiddle: https://jsfiddle.net/robertrozas/z8zbg2fj/

Upvotes: 1

Starfish
Starfish

Reputation: 3574

This is one of the ways to do it:

$('.activation_code').keyup(function() {
  var input = $(this).val().split("-").join("");
  if (input.length > 0) {
    input = input.match(new RegExp('.{1,4}', 'g')).join("-");
  }
  $(this).val(input);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="activation_code" />

I strongly suggest server-sided validation if you haven't got this already. Never trust user input.

Upvotes: 1

Related Questions