使用AngularJS app中的html输入type = search在iOS键盘上显示搜索按钮

Question

在iOS 8及更高版本中,要在iOS键盘上显示"搜索"按钮,请使用表单中的action属性.来自Anton的回答... 在iPhone/iPad Safari键盘中显示"搜索"按钮

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

但是当你使用像这样的ng-submit的AngularJS表单时,这不起作用

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

action属性会破坏Angular表单提交.

有关如何设置虚拟动作属性并仍然使用ng-submit处理表单处理的任何建议？或任何其他解决方案,将使用AngularJS HTML5表单显示iOS键盘的搜索键.

Answer 1

刚刚遇到同样的问题,这里的关键是只有在没有指定时才会angular阻止默认form提交action,所以如果你想preventDefault手动指定一个,这应该很容易.

这应该工作(为我工作):

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

另请注意,blur()在您发出搜索请求后,您需要输入字段才能自动隐藏键盘.

更新:

有了后者,这个指令将帮助您:

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

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

我已经preventDefault()在指令中,所以你的form看法如下:

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