Focus textarea via script

Community Usage questions
1

hey there!
I would like to be able to focus a textarea via a script that handles keypresses, for example:
when I press ctrl+1 focus textarea 1, allowing me to immediately type into it
press ctrl+2 for the second textarea, et cetera

I've tried directly accessing the focus() method on the textarea instance (which I found in open-stage-control/src/client/widgets/basics/textarea.js at master · jean-emmanuel/open-stage-control · GitHub), but it doesn't seem to be available from script widgets.

is this possible?

2

Available scripting functions are listed here, none of the widgets' methods are exposed as is. You can use the setFocus(id) function to focus a specific input widget but you'll need to hit enter before switching to another one as keyboard shortcuts are ignored while typing (except for the native tab that does pass focus to the next input in the tree).

3

hi jean-emmanuel, thanks for the quick reply! :heart:

I've found that setFocus works as expected with the input widget, which is a good workaround for now. but setting the focus to the textarea widget doesn't seem to do anything.
I've made this simple example to demonstrate it:

Summary 
{
  "createdWith": "Open Stage Control",
  "version": "1.25.1",
  "type": "session",
  "content": {
    "type": "root",
    "lock": false,
    "id": "root",
    "visible": true,
    "interaction": true,
    "comments": "",
    "width": "auto",
    "height": "auto",
    "colorText": "auto",
    "colorWidget": "auto",
    "alphaFillOn": "auto",
    "borderRadius": "auto",
    "padding": "auto",
    "html": "",
    "css": "",
    "colorBg": "auto",
    "layout": "default",
    "justify": "start",
    "gridTemplate": "",
    "contain": true,
    "scroll": true,
    "innerPadding": true,
    "tabsPosition": "top",
    "hideMenu": false,
    "variables": "@{parent.variables}",
    "traversing": false,
    "value": "",
    "default": "",
    "linkId": "",
    "address": "auto",
    "preArgs": "",
    "typeTags": "",
    "decimals": 2,
    "target": "",
    "ignoreDefaults": false,
    "bypass": false,
    "onCreate": "",
    "onValue": "",
    "widgets": [
      {
        "type": "script",
        "lock": false,
        "id": "keypresshandler",
        "comments": "",
        "value": "",
        "default": "",
        "linkId": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "onCreate": "",
        "onValue": "",
        "onKeyboard": "console.log('type '+type+' key '+key+' code '+code+' ctrl '+ctrl+' shift '+shift+' alt '+alt+' meta '+meta)\n\nif(type == 'keydown' && (code.substr(0,code.length - 1) == 'Digit') && meta === false)\n{\n  console.log('ctrl '+key)\n  setFocus('input_'+key)\n}\n\nif(type == 'keydown' && (code.substr(0,code.length - 1) == 'Digit') && meta === true)\n{\n  console.log('textarea_'+key)\n  setFocus('textarea_'+key) //textarea_1\n  set('textarea_'+key,'999')\n}",
        "keyBinding": [
          ""
        ],
        "keyRepeat": true,
        "keyType": "keydown"
      },
      {
        "type": "input",
        "top": 80,
        "left": 310,
        "lock": false,
        "id": "input_1",
        "visible": true,
        "interaction": true,
        "comments": "",
        "width": 123.33333333333333,
        "height": 110,
        "expand": "false",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "borderRadius": "auto",
        "padding": "auto",
        "html": "",
        "css": "",
        "align": "center",
        "unit": "",
        "asYouType": false,
        "numeric": false,
        "validation": "",
        "maxLength": "",
        "value": "",
        "default": "",
        "linkId": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "onCreate": "",
        "onValue": ""
      },
      {
        "type": "input",
        "top": 80,
        "left": 433.3333333333333,
        "lock": false,
        "id": "input_2",
        "visible": true,
        "interaction": true,
        "comments": "",
        "width": 123.33333333333333,
        "height": 110,
        "expand": "false",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "borderRadius": "auto",
        "padding": "auto",
        "html": "",
        "css": "",
        "align": "center",
        "unit": "",
        "asYouType": false,
        "numeric": false,
        "validation": "",
        "maxLength": "",
        "value": "",
        "default": "",
        "linkId": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "onCreate": "",
        "onValue": ""
      },
      {
        "type": "input",
        "top": 80,
        "left": 556.6666666666666,
        "lock": false,
        "id": "input_3",
        "visible": true,
        "interaction": true,
        "comments": "",
        "width": 123.33333333333333,
        "height": 110,
        "expand": "false",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "borderRadius": "auto",
        "padding": "auto",
        "html": "",
        "css": "",
        "align": "center",
        "unit": "",
        "asYouType": false,
        "numeric": false,
        "validation": "",
        "maxLength": "",
        "value": "",
        "default": "",
        "linkId": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "onCreate": "",
        "onValue": ""
      },
      {
        "type": "textarea",
        "top": 330,
        "left": 340,
        "lock": false,
        "id": "textarea_1",
        "visible": true,
        "interaction": true,
        "comments": "",
        "width": "auto",
        "height": "auto",
        "expand": "false",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "borderRadius": "auto",
        "padding": "auto",
        "html": "",
        "css": "",
        "value": "",
        "default": "",
        "linkId": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "onCreate": "",
        "onValue": ""
      },
      {
        "type": "textarea",
        "top": 330,
        "left": 440,
        "lock": false,
        "id": "textarea_2",
        "visible": true,
        "interaction": true,
        "comments": "",
        "width": "auto",
        "height": "auto",
        "expand": "false",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "borderRadius": "auto",
        "padding": "auto",
        "html": "",
        "css": "",
        "value": "",
        "default": "",
        "linkId": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "onCreate": "",
        "onValue": ""
      },
      {
        "type": "textarea",
        "top": 330,
        "left": 540,
        "lock": false,
        "id": "textarea_3",
        "visible": true,
        "interaction": true,
        "comments": "",
        "width": "auto",
        "height": "auto",
        "expand": "false",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "borderRadius": "auto",
        "padding": "auto",
        "html": "",
        "css": "",
        "value": "",
        "default": "",
        "linkId": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "onCreate": "",
        "onValue": ""
      }
    ],
    "tabs": []
  }
}

if you press either 1, 2 or 3 the keypresshandler script widget will set the focus to the input widgets at the top. typing and pressing enter updates the widget value and returns focus to root, and pressing escape resets the widget value to what it was before and returns focus to root (or unfocused the widget, whatever applies here)

from what I'd expect the 3 textarea widgets at the bottom should respond similarly, in this case when pressing ctrl+1, ctrl+2 or ctrl+3. as a sanity check I've set the script widget to update their values to 999 just to demonstrate that the script actually finds them correctly. but either the setFocus method doesn't work on them or I'm missing something here :thinking:

4

It's something I've overlooked, I'll fix it in next release.

1 Like
5

awesome, thanks!