2

I applied the first answer of this question into a cell I made:

var start = document.getElementById('start');
start.focus();
start.style.backgroundColor = '#000';
start.style.color = '#FFF';

function dotheneedful(sibling) {
  if (sibling != null) {
    start.focus();
    start.style.backgroundColor = '';
    start.style.color = '';
    sibling.focus();
    sibling.style.backgroundColor = '#000';
    sibling.style.color = '#FFF';
    start = sibling;
  }
}
document.onkeydown = checkKey;
function checkKey(e) {
  e = e || window.event;
  if (e.keyCode == '38') {
    // up arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.previousElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '40') {
    // down arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.nextElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '37') {
    // left arrow
    var sibling = start.previousElementSibling;
    dotheneedful(sibling);
  } else if (e.keyCode == '39') {
    // right arrow
    var sibling = start.nextElementSibling;
    dotheneedful(sibling);
  } else if (e.keyCode == '13') {

/// ***click button?***
  }
}
td, input {font-size: 1.5rem; font-family: Arial}
table {border-collapse: collapse; background: #EEE;}
td {border: 3px solid #FFF;}
.bt {padding: 0px; display:block; width: 100%; height: 100%; background: #EEE; border: 1px solid #888; border-radius: 3px;}
<table>
  <tr style="text-align:center">
    <td id="start"><input type='button' class="bt" value='a' onclick="functionA()"/></td>
    <td><input type='button' class="bt" value='b' onclick="functionB()"/></td>
    <td><input type='button' class="bt" value='c' onclick="functionC()"/></td>
  </tr>
  <tr>
    <td><input type='button' class="bt" value='d' onclick="functionD()"/></td>
    <td><input type='button' class="bt" value='e' onclick="functionE()"/></td>
    <td><input type='button' class="bt" value='f' onclick="functionF()"/></td>
  </tr>
</table>

Which is very nice, but I want to add one more feature. In every cell there is a button type input. What should I do to enable clicking the button of focused selected cell by pressing the Enter key? I tried adding this function at the bottom of the script, but I cannot think of how.

Indeed, the script is very long, but it is mostly what I brought from the said question.

karel
  • 5,489
  • 46
  • 45
  • 50
Henry
  • 154
  • 10
  • 1
    Add a keydown event to the document, listen for the enter key (check using its key code), get the cell in focus, use querySelector on the focused element to find the child button, click it using .click(). Also, note that the .focus() won’t actually focus the element in most modern browsers since it wasn’t triggered by a click event. – Endothermic_Dragon Jan 07 '21 at 05:49
  • 1
    How is the user supposed to focus on one of the 6 keys? With the mouse or tab key on the keyboard? You have an onclick function in your HTML. That's one way to do it, but jQuery provides a better way as described in the previous comment. Look up event listener. Here is a line of jQuery to get you started. $(".bt").click(function(e){e.preventDefault();}) – FSDford Jan 07 '21 at 05:50
  • @FSDford Maybe I wasn't very clear about what I mean by focusing. If you run the snippet, you will see the first cell with a thick border, and you can move this selection by pressing arrow keys. – Henry Jan 07 '21 at 05:51
  • @FSDford I'll look it up, thanks. – Henry Jan 07 '21 at 05:52
  • 1
    Read this about how to target buttons with the enter key. https://stackoverflow.com/questions/7937441/jquery-target-button-with-enter-key-when-input-field-is-focused You might also find this code hint useful event.keyCode == 13 Can you copy paste most of your code to this jsfiddle and see if you can get something running with all the information that you have now? http://jsfiddle.net/Bhf5a/ You're obviously going to have to change some of the code in that fiddle, as well. – FSDford Jan 07 '21 at 05:53
  • 1
    For the arrow keys, you want to use keydown and not keypress. Learn about that and more here https://stackoverflow.com/questions/19347269/jquery-keypress-arrow-keys – FSDford Jan 07 '21 at 06:00

0 Answers0