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.
I was thinking of creating separate panel state for each input field as a hack.
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.”
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.
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.
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.
