This repository has been archived by the owner. It is now read-only.

Support for setting iOS UIReturnKeyType #54

Open
anemitoff opened this Issue Dec 15, 2014 · 47 comments

Comments

Projects
None yet
@anemitoff

anemitoff commented Dec 15, 2014

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

This comment has been minimized.

Show comment
Hide comment
@antonshevchenko

antonshevchenko commented Jan 25, 2015

+1

@lyptt

This comment has been minimized.

Show comment
Hide comment
@lyptt

lyptt Jan 27, 2015

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.

lyptt commented Jan 27, 2015

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

This comment has been minimized.

Show comment
Hide comment
@antonshevchenko

antonshevchenko Jan 27, 2015

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>

antonshevchenko commented Jan 27, 2015

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>
@lyptt

This comment has been minimized.

Show comment
Hide comment
@lyptt

lyptt Jan 29, 2015

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.

lyptt commented Jan 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@tlancina

tlancina Feb 11, 2015

Member

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.

Member

tlancina commented Feb 11, 2015

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.

@tlancina tlancina closed this Feb 11, 2015

@mlynch mlynch reopened this Apr 9, 2015

@djangojack

This comment has been minimized.

Show comment
Hide comment
@djangojack

djangojack Jun 27, 2015

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

djangojack commented Jun 27, 2015

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

@moultz

This comment has been minimized.

Show comment
Hide comment
@moultz

moultz Jul 14, 2015

Looks like this was reopened, any progress/update?

moultz commented Jul 14, 2015

Looks like this was reopened, any progress/update?

@tlancina

This comment has been minimized.

Show comment
Hide comment
@tlancina

tlancina Jul 15, 2015

Member

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!

Member

tlancina commented Jul 15, 2015

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

This comment has been minimized.

Show comment
Hide comment
@iischajn

iischajn commented Sep 12, 2015

+1

@janpio

This comment has been minimized.

Show comment
Hide comment
@janpio

janpio commented Oct 22, 2015

+1

@daco

This comment has been minimized.

Show comment
Hide comment
@daco

daco commented Oct 29, 2015

+1

@bensinclair

This comment has been minimized.

Show comment
Hide comment
@bensinclair

bensinclair commented Nov 20, 2015

+1

@feliperbroering

This comment has been minimized.

Show comment
Hide comment
@feliperbroering

feliperbroering commented Jan 21, 2016

+1

@Findiglay

This comment has been minimized.

Show comment
Hide comment
@Findiglay

Findiglay commented Jan 27, 2016

+1

@gkucsko

This comment has been minimized.

Show comment
Hide comment
@gkucsko

gkucsko commented Jan 29, 2016

+1

@smakys

This comment has been minimized.

Show comment
Hide comment
@smakys

smakys commented Feb 4, 2016

+1

@FabricioFFC

This comment has been minimized.

Show comment
Hide comment
@FabricioFFC

FabricioFFC commented Feb 11, 2016

+1

@josenicomaia

This comment has been minimized.

Show comment
Hide comment
@josenicomaia

josenicomaia commented Feb 25, 2016

+1

@egkozlov

This comment has been minimized.

Show comment
Hide comment
@egkozlov

egkozlov commented Feb 29, 2016

+1

@b264

This comment has been minimized.

Show comment
Hide comment
@b264

b264 commented Mar 1, 2016

+1

@triasrahman

This comment has been minimized.

Show comment
Hide comment
@triasrahman

triasrahman commented Mar 3, 2016

+1

@razorcd

This comment has been minimized.

Show comment
Hide comment
@razorcd

razorcd commented Mar 3, 2016

+1

@EmilioVillante

This comment has been minimized.

Show comment
Hide comment
@EmilioVillante

EmilioVillante commented Mar 29, 2016

+1

@jasongilmour

This comment has been minimized.

Show comment
Hide comment
@jasongilmour

jasongilmour commented Apr 5, 2016

+1

@donaldG21

This comment has been minimized.

Show comment
Hide comment
@donaldG21

donaldG21 commented Apr 13, 2016

+1

@zb0t

This comment has been minimized.

Show comment
Hide comment
@zb0t

zb0t commented Apr 19, 2016

+1

@bengro

This comment has been minimized.

Show comment
Hide comment
@bengro

bengro commented May 3, 2016

+1

@yaoyakun9

This comment has been minimized.

Show comment
Hide comment
@yaoyakun9

yaoyakun9 commented May 5, 2016

+1

@TawabG

This comment has been minimized.

Show comment
Hide comment
@TawabG

TawabG commented May 9, 2016

+1

@avatsaev

This comment has been minimized.

Show comment
Hide comment
@avatsaev

avatsaev May 31, 2016

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

avatsaev commented May 31, 2016

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

@josenicomaia

This comment has been minimized.

Show comment
Hide comment
@josenicomaia

josenicomaia May 31, 2016

@avatsaev It's simple. Just PR it!

josenicomaia commented May 31, 2016

@avatsaev It's simple. Just PR it!

@plenartech

This comment has been minimized.

Show comment
Hide comment
@plenartech

plenartech commented Aug 9, 2016

+1

@EralpB

This comment has been minimized.

Show comment
Hide comment
@EralpB

EralpB commented Aug 19, 2016

+1

@yaswant-dowlut

This comment has been minimized.

Show comment
Hide comment
@yaswant-dowlut

yaswant-dowlut Aug 26, 2016

+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 commented Aug 26, 2016

+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

This comment has been minimized.

Show comment
Hide comment
@yaswant-dowlut

yaswant-dowlut Aug 26, 2016

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.

yaswant-dowlut commented Aug 26, 2016

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

This comment has been minimized.

Show comment
Hide comment
@vmunich

vmunich commented Nov 12, 2016

+1

@kyle2829

This comment has been minimized.

Show comment
Hide comment
@kyle2829

kyle2829 Jan 9, 2017

+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();
    }
  }
}

kyle2829 commented Jan 9, 2017

+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

This comment has been minimized.

Show comment
Hide comment
@adamiprinciples

adamiprinciples commented Jan 13, 2017

+1

@emersonstewart

This comment has been minimized.

Show comment
Hide comment
@emersonstewart

emersonstewart Feb 6, 2017

@kyle2829 Where are you importing the TextInput type?

emersonstewart commented Feb 6, 2017

@kyle2829 Where are you importing the TextInput type?

@kyle2829

This comment has been minimized.

Show comment
Hide comment
@kyle2829

kyle2829 Feb 6, 2017

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

kyle2829 commented Feb 6, 2017

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

@emersonstewart

This comment has been minimized.

Show comment
Hide comment
@emersonstewart

emersonstewart Feb 7, 2017

Ah, easy enough. Thanks!

emersonstewart commented Feb 7, 2017

Ah, easy enough. Thanks!

@ddoerr

This comment has been minimized.

Show comment
Hide comment
@ddoerr

ddoerr Apr 21, 2017

+1

This is super important for our project!

ddoerr commented Apr 21, 2017

+1

This is super important for our project!

@THEDOWNCOUNTRY

This comment has been minimized.

Show comment
Hide comment
@THEDOWNCOUNTRY

THEDOWNCOUNTRY Jun 16, 2017

Any Solution on this?

THEDOWNCOUNTRY commented Jun 16, 2017

Any Solution on this?

@entomb

This comment has been minimized.

Show comment
Hide comment
@entomb

entomb Jun 16, 2017

please please please please please please

entomb commented Jun 16, 2017

please please please please please please

@jdnichollsc

This comment has been minimized.

Show comment
Hide comment
@jdnichollsc

jdnichollsc commented Jul 10, 2017

+1

@jdnichollsc

This comment has been minimized.

Show comment
Hide comment
@jdnichollsc

jdnichollsc commented Jul 10, 2017

What do you think @EddyVerbruggen?

@tanohzana

This comment has been minimized.

Show comment
Hide comment
@tanohzana

tanohzana commented Aug 18, 2017

+1

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.