dynamic input with js/jquery

Question

Im trying to build a dynamic input box. When I click on the numpad I want it to show on the box, and limit that box to one number. When it reaches its limit the next input would go to the next box.

I dont want the user to able to click and manually enter a value on the input box, i just want them to use the numpad. Is the input box a good solution to this?

Here's my code:

https://jsfiddle.net/Piq9117/dwxt928c/

This code puts the number that I clicked on all the boxes. How do I write it so it will go to the other box when the box already has a number?

$(function () {
    var $passBox = $('input[type="text"]');
    var $numpad = $('.numpad');

    $numpad.on('click', function () {
        var $numValue = $(this).text();
        $passBox.val($numValue);
    })
});

I'm just a noob. I didn't know such sorcery exist. Lol! Thank you! now, I know. — ken
– ken, Commented Sep 23, 2015 at 5:07
happy coding and if this answers your question tick the check so that people know there is an answer for future references — guradio
– guradio, Commented Sep 23, 2015 at 5:11

Panos Bariamis · Accepted Answer · 2015-09-23 07:02:17Z

5

DEMO

<div class="passcode">
    <div class="passcodeBox">
        <ul>
            <li><input type="text" readonly></li>
            <li><input type="text" readonly></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <table>
        <tbody>
            <tr>
                <td class="numpad">1</td>
                <td class="numpad">2</td>
                <td class="numpad">3</td>
            </tr>
            <tr>
                <td class="numpad">4</td>
                <td class="numpad">5</td>
                <td class="numpad">6</td>
            </tr>
            <tr>
                <td class="numpad">7</td>
                <td class="numpad">8</td>
                <td class="numpad">9</td>
            </tr>
            <tr>
                <td></td>
                <td class="numpad">0</td>
            </tr>
        </tbody>
    </table>
</div>

Add attr readonly in input

edited Sep 23, 2015 at 7:02

Panos Bariamis

4,6717 gold badges41 silver badges63 bronze badges

answered Sep 23, 2015 at 4:58

guradio

15.6k4 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vaishnavi · Accepted Answer · 2015-09-23 08:50:07Z

1

Make your input fields as readonly, then replace the following script, you ll get result as you expected.

$(function() {
    var $numpad = $('.numpad');
    var n=0;
    $numpad.on('click', function() {          
        var $passBox = $('input[type="text"]:eq('+n+')');        
        n=n+1;
        if(n>1)
            n=0;
        var $numValue = $(this).text();
        $passBox.val($numValue);
    });
});

DEMO

answered Sep 23, 2015 at 8:50

vaishnavi

262 bronze badges

Collectives™ on Stack Overflow

dynamic input with js/jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related