Detect Enter Key Pressed input field


#1

Hi
I would appreciate any help or insight with the following please.

I’m trying to use an input text field and detect when the user has pressed the enter key before saving to a data slot. Input field Interact can be set to save to the data slot but it save one character at time. I need to have the completed value before calling automated tasks (no manual user button click) in script using addEventListener.

I’ve tried using “Interact” script of the input field and it does seem to run any calls in the script of the input field.


#2

Hi,

The value transformer script for input field does work because it is for onChange event. If you want to detect the keyDown then you need to manually add onKeyDown event to input field and function which runs the logic:

before render:
handleKeyDown =(e)=> {
if (e.key === ‘Enter’) {
console.log(‘Enter clicked’);
}
}

Render

<input onKeyDown={this.handleKeyDown} className=“baseFont” style={style_elField} type=“text” onChange={this.textInputChanged_field} value={this.state.field} />


#3

Thank you for the reply. Sorry for the additional question. I’m still learning.

Just want to clarify. This manual add is not in the Input field “Interact” tab edit script on change.

Where would I manually add this code? (In embed html object)


#4

You need to implement that into code the studio generates. This means you need to do merge your custom code every time you generate the code from studio.

Unfortunately there is no place in Studio where you can write the onKeyDown code so that it would be ”injected” in the exported code.