Simple Text Entry into HTML text box

In one section of an experiment, I want to capture typing dynamics. I just want the user to type a short piece of prose in a reasonably ecologically valid way - e.g. with expected ability to navigate around text field (arrow keys, click to move cursor, type), and capture timings of keypresses, relative to one-another.

Before I start overcomplicating this, in psychoJS is there any way to just use a multiline HTML form element? That would give me a whole bunch of familiar text-input functionality for free.

E.g. can I have the user type into a standard HTML text box and still capture keystroke timings. It seems like the GUI module only has single line form elements, so I can’t do it that way (or is this different in JS than in python?). Which suggests I would need to bypass builder and writing straight in JS? I’d be totally fine with that…

The only thing that matters to me are the relative timings between keystrokes, not the timing relative to any onscreen stimulus.

The alternative is to implement a text editor from the ground up - like a more sophisticated version of the textInput example. Which would be tough - e.g. I can see how to display a cursor with visual.textbox in python, but JS only has visual.textstim, which lacks a lot of important functionality.

I could definitely write something like that in a Builder code component which would work offline and online.

Here’s a post with some of the code I’d use. Potentially each key press could be logged.

You can also see similar code working for a simple two-digit age response here: Pavlovia

Best wishes,


Thanks for the suggestion. Sorry - I should have been clearer, though.
So yes, it’s fairly trivial to approximate a cursor at the end of a string using characters. What is difficult is to have a cursor which can be moved anywhere within a text. For example having written 5 lines, you now want to delete and insert text at the 3rd character of the 3rd line. This is how people generally compose texts on a computer, and it’s the dynamics of this kind of text composition that I’m interested in. Using a character as a cursor won’t really work as it will deform all the text after it. And then having solved the cursor there will be a bunch of other things to implement.
Knowing where a particular character is, on screen, so I can draw a cursor at that point is not at all easy using the resources available in PsychoJS

So this is why I am interested to know: Can I just create a standard HTML text field, into which the user can type? I don’t need to capture the text from that field in psychoJS, I just need the user to be able to type into it, while I capture keystroke timings via the psychoJS keyboard module.
Does anyone know if this is possible?

I realised that this is what you want and think I could get pretty close (including navigation using mouse and arrow keys). I would have to slightly deform the cursor location but alternating | and . would keep the deformation on each blink to a minimum.

On the other hand, I have no idea whether PsychoPy could allow you to type into an html textarea. I suspect probably not.

Thanks again - I think my unclarity consisted in even broaching this as an option. As I say “having solved the cursor there will be a bunch of other things to implement.”. Aside from the deformation of the text due to moving the cursor that I mention, users expect in even the most basic text entry environments to be able to click at a point to position the cursor. This is fairly trivial with textbox. Not so with textstim.
and the fact that even after playing whack-a-mole with the expected features, text stim is not computationally cheap (at least in the python version).

So probably you can see why, given that I’m interested in maximising ecological validity here, the opportunity to just handle text entry via a html form element - which gives you all this for free in a native-to-the-browser, optimised package - would be the first preference. So I’m really interested if anyone else has experience of attempting creating HTML form elements in PsychoJS experiments, or has relevant experience that might bear on this.

What makes me suspect this kind of thing might be hackable is that in psychoPy 3 on windows at least I can run a keyboard logger and just type into any text interface, and psychopy will capture the keyboard - because it’s operating low enough down in the OS.

If that proves to be impossible though I’ll go back to just implementing as many of these text editor features as I can, myself.

For anyone else with a similar problem - wanting to capture dynamics during long form typing - this is much more easily handled in jspsych I would recommend not trying to hack a workaround in psychopy at current state of development unless you have very specific reasons to use psychopy.

Not a general criticism of psychopy btw - it seemed a great framework from what I saw of it. Just not really the best thing for my purposes.

1 Like

Do you have an example of this In jspsych? I’m having a really difficult time with it.