Spacebar (keycode 32) to act as Enter key except inside an input field

Question

I'm working on adding accessibility to a program for hard-of-seeing users. For this, we are using the tab key to maneuver through the page. The user can then use the spacebar as the enter key, to open a link they are focused on, for example. I'm working on the spacebar to act in this manner at all times (using "e.preventDefault()"), except of course when inside an input field. I've written what makes logical sense to me, but does not work. Does anyone have any suggestions, please? This is what I have in a javascript file:

var textFieldEntry = document.querySelectorAll('input.field-input');
if (e.key == 'Space' || e.keyCode == 32) {
  if (e.target !== textFieldEntry) {
    e.preventDefault();
    e.target.click();
  };
}

Why are you doing this? semantic HTML will function as expected so use `` for links ` — GrahamTheDev, May 15 '20 at 14:08
p.s. it is `Enter` for hyperlinks, `space` is for checkboxes etc. are you just getting confused as to how each item should behave? — GrahamTheDev, May 15 '20 at 14:09
I'm doing this for a client who requested their site to act in this manner. I'm now researching if there's a "preventDefault() unless" type of coding. — Docedson, May 15 '20 at 14:13
changing expected behaviour is a terrible idea for accessibility as a user may press `space` to scroll the page, having it activate links unexpectedly would actually make the site **less** accessible. — GrahamTheDev, May 15 '20 at 14:14
btw the reason you have an issue with your code is that `e.target` is a single item, `querySelectorAll` grabs all items so they do not match, look at implementing a ".hasClass" function and check the classname instead https://stackoverflow.com/questions/5085567/what-is-the-hasclass-function-with-plain-javascript — GrahamTheDev, May 15 '20 at 14:16
I put your code below with some logs to show you why it doesn't work, look at the contents of `e.target` in the console. — GrahamTheDev, May 15 '20 at 14:28

score 1 · Answer 1 · answered Mar 07 '21 at 22:15

Please correct me this text, I am using android browser so i need the spacebar to act as physical spacebar with an API, This physical spacebar is actually itself acting as Enter (to select from list) and adding "space" to the text. its like an interactive text correction

var textFieldEntry = document.querySelectorAll('textarea.field-input');
$(document).on('keyup', function(e){
if (e.key == 'Space' || e.keyup == 229) {
  console.log("space pressed");
  console.log("e.target", e.target);
  console.log("textFieldEntry", textFieldEntry);
  if (e.target !== textFieldEntry) {
    e.preventDefault();
    e.target.click();
  };
}
});

score 0 · Accepted Answer · answered May 15 '20 at 14:27

0

not an answer, designed to show OP why his function doesn't work as intended and will be removed

var textFieldEntry = document.querySelectorAll('input.field-input');
$(document).on('keydown', function(e){
if (e.key == 'Space' || e.keyCode == 32) {
  console.log("space pressed");
  console.log("e.target", e.target);
  console.log("textFieldEntry", textFieldEntry);
  if (e.target !== textFieldEntry) {
    e.preventDefault();
    e.target.click();
  };
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="field-input"/>
<input class="field-input"/>
<input class="field-input"/>

answered May 15 '20 at 14:27

GrahamTheDev

22,724
2
32
64

Made this a community Wiki so people can fiddle with it, will delete it once OP responds – GrahamTheDev May 15 '20 at 14:28
Gotcha! Thank you! – Docedson May 15 '20 at 14:39
oh I cant delete it now you accepted :-P oh well, glad it helped! – GrahamTheDev May 15 '20 at 15:30

Spacebar (keycode 32) to act as Enter key except inside an input field

2 Answers2