Add action for keyboard return key

How-to Discussions
1

Hi!

I would like to know how to make the return key on the keyboard to perform an action (and hide the keyboard).

I remember seeing it on the changelog some time ago but now i’m not able to find it.

Thnx!

2

Hi!

You can use the ActionTriggered event to respons to the “action” key being pressed: https://www.fusetools.com/learn/uno/api/fuse/controls/textinput/actiontriggered

Something like:

<TextInput ActionTriggered="{jsFunction}" />

For other keys you can use the OnKeyPress trigger: https://www.fusetools.com/learn/fuse/ux/fuse/triggers/onkeypress

<OnKeyPress Key="... some key ...">
   ... do stuff ...
</OnKeyPress>
`
3

Thnx!

I tried it but and it works but it does not hide the keyboard when pressed (on iOS). Is there a way to hide it in the same action?

Can i change the “text” on the “action button” in the keyboard?

4

The keyboard stays open as long as the TextInput has focus. You can release it by using the ReleaseFocus action (https://www.fusetools.com/learn/fuse/ux/fuse/triggers/actions/releasefocus).

For chaning the text on the action button, you can use the ActionStyle property (https://www.fusetools.com/learn/uno/api/fuse/controls/textinput/actionstyle):

<TextInput ActionStyle="Next" />

It can be set to one of the following values:

  • Default
  • Done
  • Go
  • Next
  • Search
  • Send
5

As far as I know I cannot do the release focus in the JS side.

So how should I do it ? I’m quite lost with the: “whiletrue” / “set” / “change” … so on :slight_smile:

I guess it would be something like:

<TextInput ux:Name="UsernameInput" ActionStyle="Go" />
    <TextInputActionTriggered>
         <Callback Handler="{onLoginClick}" />

        <!-- How to release?? -->

       </TextInputActionTriggered>
</TextInput>
6

ok… i got it… sorry :slight_smile:

<TextInput ux:Name="UsernameInput" ActionStyle="Go" />
      <TextInputActionTriggered>
             <Callback Handler="{onLoginClick}" />
             <ReleaseFocus />
         </TextInputActionTriggered>
</TextInput>