Up and down arrow to hover on input fields

mobile-prototyping
#1

https://bsr0at.axshare.com

Hi All,

I hope someone can help me figure this problem out.

Basically there’s an up and down arrow on my numpad and I want it to be able to move around input fields. Also to allow one numbed to enter digits in the active state.:heart_eyes:

I was thinking of creating separate panel state for each input field as a hack. :disappointed_relieved:

P.S. I don’t know how to upload the files.:scream:

#2

You can set up a series of case statements which test which input field is “active”; if true then “activate” the previous or next input field. There are several methods you could use to define a widget as “active”
–and there are some tricky aspects with Text Field widgets to consider.

  • Focus
    • When you click on a Text Field widget it focuses it. Only one element may be focused at a time, but there is not a way in Axure (I know of) to determine which widget has focus, or in other words, logically test if a widget has focus.
  • Selected
    • You can set the selection state of a widget to true when it is clicked (or when it gets focus). Furthermore, you can define a set of widgets as a “selection group” so that only one widget in this selection group may be selected at a time. This is the “go to” method for this purpose in general.
    • However, the “Default Form” widgets (Text Field, Text Area, Droplist, etc.) cannot be assigned to a selection group (not sure why not, you just can’t)
  • Value of a global variable or text value of a widget
    • You could create a global variable to track which text field has focus (or is selected). For example, the Click or Tap or Got Focus event of each of your text field widgets could Set Variable Value OnLoadVariable to [[This.name]] (or you could create a new global variable, e.g., named ActiveField).
  • Dynamic Panel State (e.g., State1 vs State2)
    • Yes, I think your “hack” idea can work. The disadvantage is you’d need to duplicate Text Field widgets in each state and then have to coordinate text values of each to match, or try to do something like multiple state changes as a way to determine which field is “active.”

Use this button in the “reply editor”:
image

In the meantime, here is a quick demo I made using a screenshot from your link:
multiple text field navigation.rp (74.8 KB)

Since I like the “selected” method the best, I created a group for each Text Field (kind of silly, a group of one widget, but…) because a group can be included in a selection group. So, I selected each of the 3 groups and assigned them to a selection group named “input fields” so that only one can be selected at a time. You can inspect the interaction code for the arrow buttons to see how they change the selection state of a group to “move around the input fields.”

Also, for the backspace button, notice the Mouse Button Down event is used to `Set Text of Focused Widget to “[[ LVAR1.slice(0, -1) ]]”

  • The Mouse Button Down event is used instead of Click or Tap because the latter will actually focus the backspace button itself (because it was just clicked) but the “mouse down” event is triggered before a “mouse up” or “click” event occurs. This also makes the backspace action a little more responsive.
  • The expression, [[ LVAR1.slice(0, -1) ]] uses some more advanced features of Axure where “LVAR1” is a local variable pointing to the “text on focused widget” and .slice(0, -1) is a built-in string function that removes the last character of a string.
  • Learn more about Axure’s expressions and built-in math and string manipulation here:
    https://docs.axure.com/axure-rp/reference/math-functions-expressions/#docsNav
    and I recommend just Googling “javascript” and what you want to do, like, javascript remove last character to see how to use any of this stuff.
#3

multiple text field navigation.rp (113.9 KB)

I was wondering you could help with this problem as well.
basically we have an input field within the keyboard that gets sent into the input field outside of the keyboard when you hit enter.

thank you for being patient!

#4

Sure, makes sense. In some ways this makes your setup and logic easier.

multiple text field navigation (v2).rp (190.0 KB)

Here’s what I did:

  • Duplicated Page 1 to Page 2
  • Ungrouped SG04 (no reason to be part of the “input fields” selection group, so no reason to have a “group of one widget”) and named the Text Field as “inputKeyboard”
  • Changed the logic for the number keys and backspace key:
    Set Text inputKeyboard to "[[Target.text]][[This.text]]"
    • (where Target and This are convenient pointers. This allows same code for all number keys–easy copy&paste to all keys. Because “inputKeyboard” is the widget chosen in the TARGET field of the Set Text action, it can be referred to as [[Target]].)
    • Now the number keys only have to update the same Text Field widget (inputKeyboard) so no need to test if one of the user input fields are focused.
  • I added conditional case logic to the new green enter button.
    • Because the behavior is different depending on which input field is selected, there are three cases, one for each input field. For example,
      If is selected of SG01 equals true
      Set Text inputSelection01 to text on inputKeyboard
      Wait 500 ms
      Set Selected/Checked SG02 to "true"
      (the Wait is just slow things down and clearly indicate the text field update, then the selection/focus change to the next field. You can adjust the timing or remove it.)
    • Depending on the experience you want, you might add a Set Text inputKeyboard to "" if you think the keyboard field should be cleared upon “entering a value”.
  • I changed the actions for the input field groups.
    • It’s no longer necessary to worry about which field is focused, so clicking on a group just selects it.
    • In each group, the Selected event of the text field now has:
      Set Text inputKeyboard to text on This
      …to coordinate the field on the keyboard with the currently selected input field. You can remove this if you don’t like that experience.
    • I added a selected style to inputKeyboard so it will “flash” when its text is automatically changed.

I wasn’t sure what was meant by this in your file:
“PLUS The hover moves to the next field.”

  • If you add a Mouse Hover event to the green enter button then it will fire after the cursor is over this widget for approximately 1500 ms. This would create a race to click it before then, otherwise the value in inputKeyboard would get sent to the wrong field.
  • I did add a Mouse Hover event to each input group which does the same thing as Click or Tap …if that is what you meant.