Easiest way to prevent normal text from being focusable

[einGlasRotwein]

Hi everyone,

this might be a stupid web question and not per se jsPsych related, but: What is the easiest way to prevent normal text elements (such as instructions, stimuli etc.) from being focusable? My issue is this: When the users click anywhere on the page at some point during the experiment (except for (radio) buttons or other stuff that's meant to be clickable), a blinking cursor appears in the text. Crucially, the cursor is still displayed if I advance to the next trial. I.e., if I click on the page somewhere during an instructions plugin, a blinking cursor will be shown during my (e.g.) html keyboard response trials that follow. It's of course not ideal when a blinking cursor is shown in my stimulus material.

Adding user-select: none; to .jspsych-content does the trick, but I am not sure whether this could have unintended consequences at some point? What would be the recommended strategy here?

Thank you in advance!
Juli

[jadeddelta]

hi juli,

don't worry, there are no stupid questions, especially for web dev :). i'm not sure about the blinking cursor, it might just be a quirk with your browser or cursor software. but as for preventing focusable text: adding user-select: none; is pretty much the only simple way to do it. i believe there's not really any unintended consequences as it only focuses on text, so buttons and text within input fields are still interactable and selectable by the user, but any regular text cannot be.

also: if your experiment is targeting safari, it's important to note that user-select cannot be used (apple has yet to implement it to work with the base css rule), you'll also have to add -webkit-user-select: none; if you'd like the same behavior to appear on those browsers.