Show Search button on iOS keyboard using html input type=search in AngularJS app

Question

In iOS 8 and above, to show the Search button on the iOS keyboard, you use the action attribute in the form. From Anton's answer here ... Show 'Search' button in iPhone/iPad Safari keyboard

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

But this does not work when you are using an AngularJS form with ng-submit like this

<form action="." ng-submit="doSearch(searchtext)">
  <input type="search"  ng-model="searchtext"  />
</form>

The action attribute breaks the Angular form submit.

Any suggestions on how to put a dummy action attribute and still get ng-submit to handle the form processing? Or any other solution that would show the iOS keyboard's search key with an AngularJS HTML5 form.

Answer 1

Just encountered the same problem, key here is that angular prevents default form submission only if no action specified, so if you want to specify one you need to preventDefault manually, which should be pretty easy.

This should work (worked for me):

<form action="." ng-submit="$event.preventDefault();doSearch(searchtext)">
  <input type="search"  ng-model="searchtext"  />
</form>

Also note, that you will need to blur() your input field after you made a Search request in order to auto-hide keyboard.

Update:

With the latter this directive will help you:

.directive('prettySubmit', function () {
    return function (scope, element, attr) {
        var textFields = $(element).children('input');

        $(element).submit(function(event) {
            event.preventDefault();                
            textFields.blur();
        });
    };
})

I have placed preventDefault() in directive, so your form will look like this:

<form action="." ng-submit="doSearch(searchtext)" pretty-submit>
  <input type="search"  ng-model="searchtext"  />
</form>