CODEWITHSUNDEEP
html
A G
A G

Reputation: 1

Inserting Keyboard Functionality

I have designed a single page website with different divs one below the other. How can I assign keyboard functionality to it? So, if I press "Enter" the page should take the action of "Next" button and display the div created below. Similarly, when I press "Backspace" the page should take the action of "Previous" button and display the div created above. Please help.

Upvotes: 0

Views: 32

Answers (2)

William Callahan
William Callahan

Reputation: 639

Here is an example for what you are looking for. Please note: I have not implemented the usage of a backspace; it is dangerous to use a backspace given that it could give unexpected results by sending the user to the last page. Instead, please use the left and right arrow keys or enter to toggle.

$(function() {
  $("#two").hide();

  $("body").keyup(function(event) {
    if (event.keyCode === 39 || event.keyCode === 13) { //Right Key or Enter
      $("#one").hide();
      $("#two").show();
    } else if (event.keyCode === 37) { //Left Key
      $("#one").show();
      $("#two").hide();
    }
  });
});
.blue,
.red {
  color: white;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="blue" id="one">
    This is the first example
  </div>
  <div class="red" id="two">
    And this is the second
  </div>
</body>

Example.html

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(function() {
                $("#two").hide();

                $("body").keyup(function(event) {
                    if (event.keyCode === 39 || event.keyCode === 13) {
                        $("#one").hide();
                        $("#two").show();
                    } else if (event.keyCode === 37) {
                        $("#one").show();
                        $("#two").hide();
                    }
                });
            });
        </script>
        <style>
            .blue, .red {
                color: white;
            }

            .blue {
                background-color: blue;
            }

            .red {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="blue" id="one">
            This is the first example
        </div>
        <div class="red" id="two">
            And this is the second
        </div>
    </body>
</html>

Upvotes: 1

S M
S M

Reputation: 3233

You can use jQuery for this.

    $(document).keypress(function (e){ 
    if(e.keyCode == 13) // Enter key
    {
        // your action here, for example
        $('#buttonNext').click();
    }
    else if(e.keyCode == 8)    // BackSpace
    { 
        // your action here, for example
        $('#buttonPrev').click();
    }
});

Upvotes: 1

Related Questions