在 AngularJS 应用程序中使用 html 输入类型 = 搜索在 iOS 键盘上显示搜索按钮答案

【问题标题】：Show Search button on iOS keyboard using html input type=search in AngularJS app在 AngularJS 应用程序中使用 html 输入类型 = 搜索在 iOS 键盘上显示搜索按钮
【发布时间】：2015-10-23 03:55:53
【问题描述】：

在 iOS 8 及更高版本中，要在 iOS 键盘上显示搜索按钮，您可以在表单中使用 action 属性。来自安东在这里的回答...Show 'Search' button in iPhone/iPad Safari keyboard

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

但是，当您使用 AngularJS 表单和 ng-submit 时，这不起作用

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

action 属性破坏了 Angular 表单提交。

关于如何放置一个虚拟动作属性并仍然让 ng-submit 来处理表单处理的任何建议？或任何其他可以使用 AngularJS HTML5 表单显示 iOS 键盘搜索键的解决方案。

【问题讨论】：

标签： ios angularjs safari keyboard

【解决方案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>

【讨论】：

太棒了。对此进行了测试，效果很好！谢谢马克斯
散焦元素意味着用户体验的下降——如果用户想再次使用键盘进行搜索
@ArtjomKurapov 我认为这是一个权衡问题，键盘将占据屏幕的一半，因此用户通常希望将其移开以查看此搜索返回的结果。

【解决方案2】：

我遇到了同样的问题。最后我决定使用

【讨论】：