Question 295956 in Html Question posted in
Some basic documentation can be found here.

Html – How do you disable change in radio button selection using keyboard arrows?

I have an HTML form with 6 radio buttons. Each radio button, when selected, makes an API call to the backend and fetches some data to populate the next select input in the form. If one selects a radio button and then holds the up or down arrow key, then the radio button selection cycles very rapidly and we see a massive number of API calls being made to the backend. Is there a way to disable the radio selection using either the up/down arrows? or do I have to prevent it through JavaScript?

Tags:

2

Answers


  1. 0

    There is no way of disabling the arrow keys for selection using HTML (that I know of), but you can do it using JavaScript.

    Below is a working example:

    const radioButtons = document.querySelectorAll('input[type="radio"]');

radioButtons.forEach(radio => {
  radio.addEventListener('keydown', function(event) {
    if (event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40) {
      event.preventDefault();
    }
  });
});
    <form>
  <input type="radio" id="option1" name="option" value="1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="option" value="2">
  <label for="option2">Option 2</label><br>
</form>

    Explanation: This loops through all the radio buttons and listens for a keypress event. Then we check if the pressed key is one of the arrow keys. If it is, prevent the default event.

    If you don’t want to use JavaScript, you could just use a dropdown instead.

    Login or Signup to reply.
  2. 0

    Another Approach is:

        var radioButtons = document.querySelectorAll('input[type="radio"]');
    
    radioButtons.forEach(function (radioButton) {
      radioButton.addEventListener('keydown', function (event) {
        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
          event.preventDefault();
        }
      });
    });
        <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button Example</title>
    </head>
    <body>
    
    <form>
    <input type="radio" name="option" id="option1" value="1"> Option 1
    <input type="radio" name="option" id="option2" value="2"> Option 2
    <input type="radio" name="option" id="option3" value="3"> Option 3
    <input type="radio" name="option" id="option4" value="4"> Option 4
    <input type="radio" name="option" id="option5" value="5"> Option 5
    <input type="radio" name="option" id="option6" value="6"> Option 6
    
    <!-- Additional form elements and API response handling -->
    </form>
    </body>
    </html>

    This script adds a keydown event listener to each radio button. When the arrow keys are pressed, it prevents the default behavior, which in this case is the cycling through options. This should help prevent the rapid API calls triggered by the arrow keys. Adjust the script as needed based on your specific HTML structure and requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search