javascript or jquery Input text number only and auto masking

StackOverflow https://stackoverflow.com/questions/23371840

Question

I use javascript and jquery.

I want to make a masking template for

<input type="text">

Which accept numbers only and auto masking format for every number keyup result.

The masking format is : 99-99-99-99-[repeat format until last inputed number]

Examples for valid input and result :

Inputed : 001234567890
Result : 00-12-34-56-78-90-

Inputed : 00[backspace]1234567890
Result : 01-23-45-67-89-0

Inputed : 00[backspace]1234567890
Result : 01-23-45-67-89-0

My current complete html working script with problems : 

<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  </script>
</head>
<body>
<script>
var count1=0;
var strPrev1 = '';
$(document).ready(function()
{
  $('#input1').keyup(function(e)
  {

//    Filter input text to accept only numbers , arrow movement, backspace, delete

    if ((e.keyCode == 8) ||  (e.keyCode == 46) || (e.keyCode >= 35 && e.keyCode <= 40) || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
    {
      if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
      {
        count1++;
//        if count1 % 2 = 0, add divider '-'
        if (count1 % 2 == 0) 
        { 
          $("#input1").val($("#input1").val()+'-');
        }
      } 
      if ((e.keyCode == 8) ||  (e.keyCode == 46))
      {
//      no idea what to do to keep the mask format 99-99-99-99-[repeat format until last inputed number] is it "count1--;" ?
      }
      strPrev1 = $("#input1").val();
    }
    else 
    {
//      replace input text value with previous accepted
      $("#input1").val(strPrev1);
    }
  });
});
</script>

<input name="input1" id="input1" type="text">

</body>
</html>

Problems are how to keep it on the masking format 99-99-99-99-[repeat format until last inputed number] ? :
1. If the user is pressing delete, or backspace, the will be changed. How to keep the masking format stand still ?
eg :
Input : press 1234567890, move arrow left to 4, press delete, press 8, and move to the last line and press 12
My wrong result : 12-38-56-78-90-1-2
Correct result : 12-38-56-78-90-12-

2. If the user press the number in very fast, the input mask will be come weird... Sometimes it can become 999-9-99-99-99- and other masking format. Did not give me the desired masking format.. It should be still with the masking format : 99-99-99-99-[repeat format until last inputed number]. How to fix my current script ?

Eg:
Input : pres 123 in quick
My wrong result : 123-
Correct result : 12-3



Any idea how to fix my script ?

PS :
I already read the following links, still give me no idea to fix my script :
How to allow only numeric (0-9) in HTML inputbox using jQuery?
Accept only numbers in Textbox - jQuery
jquery plugin to format text input
How to allow only numbers on a text input but allow commands with JavaScript?
Only allow numbers in an input with javascript and allow copy and paste?
Restrict input to number only on pasting
jQuery only digits in input
Mask input for number - percent
Autotab input with javascript
Only allow Numbers in input Tage without Javascript
How to force only numbers in a input, without Javascript?
Help to improve this javascript input mask
Why is my jquery input mask not working?

Était-ce utile?

La solution

Done it by my self. Here is the answer : 

<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  </script>
</head>
<body>
<script>
var strPrev1 = '';
var strScore1 = '';
$(document).ready(function()
{
  $('#input1a').keyup(function(e)
  {
    if ( $("#input1a").val() == '' ) { $("#input0a").val(''); }
//    Filter input text to accept only numbers , arrow movement, backspace, delete
    if ((e.keyCode == 8) ||  (e.keyCode == 46) ||  (e.keyCode == 16) || (e.keyCode >= 35 && e.keyCode <= 40) || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
    {
      if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode == 8) ||  (e.keyCode == 46))
      {
        $("#input1a").val().replace("-","");
        strScore1 = $("#input1a").val().match(/.{1,2}/g);
        $("#input0a").val(strScore1.join().replace(/,/g , "-"));
      } 
      strPrev1 = $("#input1a").val();
    }
    else 
    {
//      replace input text value with previous accepted
      $("#input1a").val(strPrev1);
    }
  });
});
</script>

RESULT : <input name="input0a" id="input0a" type="text" style="width: 100%;" disabled>
SOURCE : <input name="input1a" id="input1a" type="text">
</body>
</html>

Use the .match(/.{1,2}/g) then join() it. finally, .replace(/,/g , "-")) the inputed string.

Autres conseils

If the user holds down a key the keyup event won't trigger, use a keypress event handler. Here's what I changed:

$('#input1').keypress(function(e)

...

if (count1 > 0 && count1 % 2 == 0) 
{ 
  $("#input1").val($("#input1").val()+'-');
}
count1++;

DEMO

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top