4

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.

Community
  • 1
  • 1
Ash
  • 93
  • 1
  • 6

2 Answers2

9

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>
Max Yari
  • 3,617
  • 5
  • 32
  • 56
  • Awesome. Tested this out and it works great! Thanks Max – Ash Oct 24 '15 at 15:35
  • Defocusing element would mean decrease in UX though - if user wants to search something again using just keyboard – Artjom Kurapov Nov 15 '16 at 06:42
  • @ArtjomKurapov I would argue with that, it's a matter of tradeoffs, keyboard will take up half of a screen so user will usually want to get it out of the way to see what results this search returned. – Max Yari Nov 22 '16 at 14:56
-1

I encountered the same problem. Finally I decided to use

<form action="{{'#/search/' + searchText }}">

Instead, and it works.

cz3pearl
  • 1
  • 1