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!