Support for setting iOS UIReturnKeyType

[anemitoff]

We really need a feature to allow an ionic application to select whether the return key on the iOS keyboard says "GO" or one of the other allowable values such as "Next" (see below for other options). I know others have requested this functionality in the ionic forums but it seems that this keyboard plugin is the proper target for such a request.

The allowable values are:
typedef enum : NSInteger { UIReturnKeyDefault , UIReturnKeyGo , UIReturnKeyGoogle , UIReturnKeyJoin , UIReturnKeyNext , UIReturnKeyRoute , UIReturnKeySearch , UIReturnKeySend , UIReturnKeyYahoo , UIReturnKeyDone , UIReturnKeyEmergencyCall , } UIReturnKeyType;

[antonshevchenko]

+1

[ghost]

I don't think this is currently possible considering the app's hosted in a UIWebView. There doesn't seem to be any way to convince WebKit to use a specific return key for a field, and there's definitely no way of doing it through Objective-C.

All the plugin has access to is a UIWebView and a UIViewController. Maybe some kind of dirty hack could be implemented to force UITextFields associated with DOM elements to have a certain key type, but I doubt this would be particularly stable or future proof.

[antonshevchenko]

I noticed that putting an <input> field in <form>s will automatically adjust the keyboard's return key.

For instance, the following would display the word "Search" in the return key:

<form>
  <input type="search">
</form>

[ghost]

Yes this seems to work for simple use cases, the main issue is achieving the 'next' functionality you can do in native iOS apps. I don't think this is currently possible without resorting to private APIs as Safari uses an accessory bar to achieve this instead.

[tlancina]

Duplicate of #20. I spent a lot of time on this and even with private APIs couldn't get it to work. As @lyptt said, the 'next' functionality for the return key doesn't exist in mobile Safari (as far as I know), instead it uses the accessory bar.

I'm going to be revamping a lot of keyboard stuff soon so I'll take another look, but closing this for now.

[lbickston]

I see this was reopened on April 9. Any progress on this?

[moultz]

Looks like this was reopened, any progress/update?

[tlancina]

It was reopened in hopes that WKWebView would expose more access to the keyboard (or implement UITextInputTraits), but that wasn't the case. As far as I know this is still not possible, but I would really love to be wrong!

[iischajn]

+1

[janpio]

+1

[daco]

+1

[bensinclair]

+1

[feliperbroering]

+1

[Findiglay]

+1

[gkucsko]

+1

[smakys]

+1

[FabricioFFC]

+1

[josenicomaia]

+1

[egkozlov]

+1

[b264]

+1

[triasrahman]

+1

[razorcd]

+1

[EmilioVillante]

+1

[jasongilmour]

+1

[donaldG21]

+1

[popaprozac]

+1

[bengro]

+1

[kernelLove]

+1

[TawabG]

+1

[avatsaev]

the fact that is issue is still open shows how much of a garbage framework ionic is

[josenicomaia]

@avatsaev It's simple. Just PR it!

[plenartech]

+1

[EralpB]

+1

[yaswant-dowlut]

+1

At least we should have the ability to switch to the next field when the return key is clicked, and perform an action when the return key is hit on the last field.

[yaswant-dowlut]

A workaround to get the behaviour I described in my previous comment working is as follows. Note that I have assumed that jQuery has been included in the project. But this example can also be adapted to work with jqLite alone as well.

Add the following line in config.xml:

<preference name="KeyboardDisplayRequiresUserAction" value="false"/>

Create the following directive:

.directive(‘iosReturnHandler', function() {
  return {
    restrict: 'A',

    link: function(scope, element, attrs) {
      element.keyup(function(e) {
        if (e.which == 13) {
          var nextSibling = element.next('input');

          if (nextSibling.length == 0) {
            scope.$apply(function() {
              scope.$emit(‘ios-last-return-clicked');
            });

            return;
          }

          nextSibling.focus();
        }
      });
    }
  }
})

Then add the directive to input fields on which you want the return key of the keyboard to be handled:

<input type=“text” id=“input1” ios-return-handler />
<input type=“text” id=“input2” ios-return-handler />
<input type=“text” id=“input3” ios-return-handler />

This will cause the focus to be automatically changed to the next input when the return button is clicked on the keyboard. When the last input is reached and the return button is clicked again, the event ios-last-return-clicked will be emitted which you can catch in your controller to perform some action.

I hope this helps.

[vmunich]

+1

[kyle-apex]

+1

If it's useful for anyone, I created the following directive that works to tab when "Go" is clicked in RC4 when adding a tabOnGo directive to ion-input.

@Directive({
    selector: '[tabOnGo]'
})

export class TabInputDirective {

  inputRef: TextInput;
  constructor(inputRef: TextInput) {
    this.inputRef = inputRef;
  }

  @HostListener('keydown', ['$event']) onInputChange(e) {
    var code = e.keyCode || e.which;
    if (code === 13) {
      e.preventDefault();
      this.inputRef.focusNext();
    }
  }
}

[adamiprinciples]

+1

[ghost]

@kyle2829 Where are you importing the TextInput type?

[kyle-apex]

@emersonstewart import {TextInput} from 'ionic-angular';

[ghost]

Ah, easy enough. Thanks!

[ddoerr]

+1

This is super important for our project!

[THEDOWNCOUNTRY]

Any Solution on this?

[entomb]

please please please please please please

[jdnichollsc]

+1

[jdnichollsc]

What do you think @EddyVerbruggen?

[tanohzana]

+1