-1

I'm trying to implement a simple Javascript that will cause the focus to jump to the next input box with a particular CSS class when the "period" or "slash" (. /) keys are pressed.

The input boxes with the class userinput are the 20 boxes underneath the "IP Address" column on the following page, to the left of the Check/Show buttons.

http://www.practicalnetworking.net/subnet2.html

Here is the script I added:

<script type="text/javascript">
      // Jump to next box on keypress: period
      $(window).load(function(){
        var currentBoxNumber = 0;
        $(".userinput").keyup(function (event) {
            if (event.keyCode == 190) {
                textboxes = $("input.userinput");
                currentBoxNumber = textboxes.index(this);
                console.log(textboxes.index(this));
                if (textboxes[currentBoxNumber + 1] != null) {
                    nextBox = textboxes[currentBoxNumber + 1];
                    nextBox.focus();
                    nextBox.select();
                    event.preventDefault();
                    return false;
                }
            }
        });
      });
</script>

I got the script from this JFiddle, and it works perfectly fine in the JFiddle:

http://jsfiddle.net/qLc8851f/

I got a keycode of 190 for . on this site:

http://www.asquare.net/javascript/tests/KeyCode.html

I got 191 for /, but haven't added that into the code yet. Still trying to get it to work with the ..

Disclaimer, I am a javascript newb. So please consider explaining the solution like I'm 5 =). Thank you.

Eddie
  • 378
  • 1
  • 3
  • 16
  • You realize browsers already implement this with tab and shift-tab, right? – jmargolisvt Apr 20 '18 at 19:34
  • 1
    Your inputs don't have the needed `userinput` class. Once you add jquery to your page, you'll need to add `class="userinput"` to each input you want to participate. – ShaneCoder Apr 20 '18 at 19:44
  • @jmargolisvt Yes. But the user's are inserting IP addresses, and its natural to hit "period" between each octet. – Eddie Apr 20 '18 at 20:59
  • @ShaneCoder Yikes. Big oversight. Had that on my locally hosted HTML, I guess it didn't make it to the uploaded page. Good catch. – Eddie Apr 20 '18 at 20:59

1 Answers1

1

The webdev tools included in any browser are very helpful in debugging problems such as this. When I opened your page, the console said "$ is not defined". You need to include jQuery!

Aurel Bílý
  • 7,068
  • 1
  • 21
  • 34