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?

5

Thanks that .focus() solved the issue but i did it in a different way.
i just simply moved from that text field to the password field by writing in textField event action onKeyPressed script:
if event.key == "Enter":
self.parent.parent.getChild("FlexContainer_0").getChild("passwordField").focus()

my textField was in a flex container and the passwordField was in a different flex. both were in the same view.

6

i was making my own login but the problem has been solved

7

This sort of code breaks if you ever move components in and out of containers or rename them.

Consider using sendMessage() instead and adding a message handler on the target field to set focus on itself. This is a practice worth adopting and whoever has to maintain your code will appreciate it.

Also, please see Wiki - how to post code on this forum.

1 Like
8

Seriously, what @Transistor said. It took me a while to get in the habit, but lately I'm soooo glad I did, as I've been able to revamp several different layouts without worrying about what I might have broke in the process. I now bind the value of every input to a custom view property, so I can reference that instead of the input itself. It not only safeguards it against layout changes, but makes for much cleaner, easier to understand code (I cringe every time I see a .getChild() or .getSibling()). Just a little extra effort in the short term can save you lots of hassle in the long run.

3 Likes