Want to switch from one text field to password field by pressing enter

Ignition
1

i am making a login form in which my root container is a flex container.

  • in root i have added two more flex containers
  • in first flex container i have the text field
  • in second flex container i have the password field
  • i want to do is that when i press enter key in text field
  • it will move to the password field
  • both the components are in the same view
  • but in different flex containers
2

Tip: Standard GUI is that Enter triggers the default button - probably the Login or similar in your view. (And Esc triggers the Cancel button.)
You should be aiming to move to next field with Tab.

I think you're looking for .focus(). I haven't had to do it so I can't help further at this time.

3

Use on onKeyPress event handler on the text field, and then .focus() on the password field:

{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "events": {
          "dom": {
            "onKeyPress": {
              "config": {
                "script": "\tif event.key \u003d\u003d \u0027Enter\u0027:\n\t\tsystem.perspective.sendMessage(\u0027focus-pwd\u0027)"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "TextField"
        },
        "position": {
          "basis": "32px"
        },
        "props": {
          "placeholder": "Hit ENTER to..."
        },
        "type": "ia.input.text-field"
      },
      {
        "meta": {
          "name": "PasswordField"
        },
        "position": {
          "basis": "32px"
        },
        "props": {
          "placeholder": "...focus this field"
        },
        "scripts": {
          "customMethods": [],
          "extensionFunctions": null,
          "messageHandlers": [
            {
              "messageType": "focus-pwd",
              "pageScope": true,
              "script": "\tself.focus()",
              "sessionScope": false,
              "viewScope": false
            }
          ]
        },
        "type": "ia.input.password-field"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "gap": 8,
        "padding": 8
      }
    },
    "type": "ia.container.flex"
  }
}

You can paste that example into a new view by holding down SHIFT while right-clicking and selecting "Paste JSON." It uses a message to notify the password field rather than navigating to the field via getSibling() as that kind of code breaks as soon as you start renaming/reorganizing components (and should be easier to plug in to whatever layout you already have).

1 Like
4

Just checking you're not trying to roll your own user login?