Angular.js: iOS 8 keyboard show "Return" instead of "Go" button for forms with ng-submit on input text focus

[ravikiranr26]

Hi All,

Not able to find a workaround or fix the forms with ng-submit when the input focus is on the "return" button shows up in the iOS keyboard instead of "Go" button. Form is placed to wrap the input texts

Regards,
Ravi

[Narretz]

What does the HTML for that look like? Can you post a minimal demo, ideally on plnkr.co or similar?

[jmis]

It appears that iOS will only show the 'Go' button when there's an action attribute on the form element.

My workaround was to add the action attribute and to add a submit event handler to prevent the browser from submitting the form data. This approach lets me send the form data myself via JavaScript.

Demo: http://plnkr.co/edit/cDFXoNs7b7Pbir3y7z1X?p=preview

[ravikiranr26]

Hello Narretz,
Please find the demo on the plnkr. This web page needs to be viewed on the iOS 8 phone/mobile device.
Let me know if you need any info. Thanks
http://plnkr.co/edit/sLsOqQ?p=info

[ravikiranr26]

Hi jmis,

Yes its works with action attr and preventing a on submit handler on form.

But since im using angular and using ng-submit, if you add action its against the principle of angular what it offers. Like the form validation goes for a toss and its not a good practise to have both action and ng-submit.

Regards,
Ravi

[Narretz]

Sounds to me like ios is being overly strict here. Does it happen in Safari in iOs, in one of the embedded webviews, or in both?

[ravikiranr26]

Yes Narretz it happens in safari iOS not checked on webview.

Let me know if we can put a workaround with this ?

[Narretz]

So this is either a browser bug or expected behavior. iOs must base the decision to display "Go" on something. Maybe they should do that when the form has a submit button, and not also when it has an action attribute, I don't know. You can open an issue with Apple for this.

Here's a very simple workaround:

app.directive('fakeAction', function() {
  return {
    link: function(s, e, a) {
      e.attr('action', '');
    }
  }
})

Add this to the form. This adds an empty action attribute. Since the angular form checks the existence of the action attribute in the preLink function, everything will work as before.

[gkalpak]

There is not much we can do about how iOS decides what to show to the user. At best we could create a directive that would say "ignore the action we provide - it is only so that iOS shows 'Go'" and then you should have to put a dummy action on your form (that's two attributes).

The work-around provided by @Narretz is more concise (just one attribute - or you can even name it form and have it apply to all forms automatically).

Considering this is something that iOS should improve upon (e.g. detecting the presense of a submit button) and there is an easy work-around for Angular apps, I'm going to close this as _won't fix_.

[Devashish09]

In my case, I am usng ionic 3 and wkwebview. But this go button is not coming Ios. Instead of go button return button is coming. I will/would appreciate any help.

[Narretz]

@Devashish09 As said before, this is iOS specific behavior, and a workaround has been posted in this thread already: https://github.com/angular/angular.js/issues/13070#issuecomment-151558050