0

I have an input textbox and input keypad display on my webpage like in below image.

enter image description here

I have html code that takes digits from keypad to inputbox like below:

<div class="form-group">
 <span class="demo_txt"><i>Demo Mode: Enter any 6 digit number </i></span>
 </div>
    <form id="patientAuthorize"  Name="calc" method="post" novalidate>
        <div class="form-group centered">
            <input class="intxt" autocomplete="off" id="Phone" maxlength="6" name="display" type="tel" value="" placeholder="PIN"><button class="close-icon" type="reset"></button>

             <input class="button button-orange" type="button" onclick="window.location.href=&#39;startinterview.html&#39;" value="ENTER" style="width:100px">
        </div>

<div class="calculator">
    <!-- Screen and clear key -->

    <div class="keys">
        <!-- operators and other keys -->
        <span OnClick="calc.display.value+='1'">1</span>
        <span OnClick="calc.display.value+='2'">2</span>
        <span OnClick="calc.display.value+='3'">3</span>

        <span OnClick="calc.display.value+='4'">4</span>
        <span OnClick="calc.display.value+='5'">5</span>
        <span OnClick="calc.display.value+='6'">6</span>

        <span OnClick="calc.display.value+='7'">7</span>
        <span OnClick="calc.display.value+='8'">8</span>
        <span OnClick="calc.display.value+='9'">9</span>

        <span OnClick="calc.display.value+='0'" style="width: 166px;">0</span>
        <span class="clear" OnClick="calc.display.value=''">   <div class="xBox">X</div></span>

    </div>
</div>
    </form>

I want to add symbols in textbox while user clicks some particular digits from keypad until some limit. e.g. if user has to type PIN number in textbox like 123-456 then after he clicks 1,2,3 from keypad '-' should automatically add after 123 in textbox and then user should allow to type remaining 3 digits.

I want this functionality for some formats like PIN (XXX-XXX), date (MM/DD/YYYY), phone number ((XXX)XXX-XXXX) etc.

I have checked Masked input plugin but it takes input from keyboard not from webpage keypad. Also user may not click on textbox first to start typing. User may directly click on buttons of webpage keypad to start typing.

How I can get above functionality for my webpage keypad? Can anyone please help me in this?

Thanks in adv.

Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
anonymous
  • 41
  • 2
  • 7

2 Answers2

0

The plugin you found looks like a great start. You could try to generate keyboard events from the click events to route them into the existing plugin.

neuhaus
  • 3,886
  • 1
  • 10
  • 27
0

You could add a simple handler which checks for input changes.

var reformat = function () {
    // remove all non-numeric chars
    var txt = $("input.intxt").val().replace(/\D/g, "");
    // insert dash
    if (txt.length > 3) {
        txt = txt.slice(0, 3) + "-" + txt.slice(3);
    }

    $("input.intxt").val(txt);
}

$("input.intxt").on("keyup", function() {
    reformat();
});

$(".keys span").on("click", function() {
    reformat();
});

Here's a fiddle.

Jerome Indefenzo
  • 967
  • 6
  • 25
  • i tried your code by including it on page, somehow script is not working on my webpage – anonymous Oct 21 '16 at 10:24
  • I have added `jquery-3.1.1.min.js` on my page. still its not working like your fiddle. Can you please tell me what did you added extra other than my code to work? – anonymous Oct 21 '16 at 11:54
  • It just has html,css stuff. I had created new html page which is having your fiddle's code html,css,js and added `jquery-3.1.1.min.js` but its not working. – anonymous Oct 21 '16 at 12:31
  • Can you try replicating the problem in a fiddle? – Jerome Indefenzo Oct 21 '16 at 18:48