使用AngularJS应用中的html input type = search在iOS键盘上显示搜索按钮 [英] Show Search button on iOS keyboard using html input type=search in AngularJS app

问题描述

在iOS 8及更高版本中，要在iOS键盘上显示搜索"按钮，请使用表单中的action属性.从安东的答案开始... 在iPhone/iPad中显示搜索"按钮Safari键盘

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>

但是当您使用带有ng-submit这样的AngularJS表单时，这不起作用

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>

action属性中断了Angular表单提交.

The action attribute breaks the Angular form submit.

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

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.

推荐答案

刚才遇到了相同的问题，关键是angular仅在未指定action的情况下才阻止默认的form提交，因此如果要指定您需要手动preventDefault进行操作，这应该很容易.

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>

还请注意，发出搜索请求后，您需要blur()输入字段以自动隐藏键盘.

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

更新:

对于后者，此指令将帮助您:

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();
        });
    };
})

我已将preventDefault()放置在指令中，因此您的form如下所示:

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>

这篇关于使用AngularJS应用中的html input type = search在iOS键盘上显示搜索按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！