如何在不隐藏键盘的情况下清除输入搜索？ （移动的）

Question

我正在使用 Ionic/AngularJS，这是我的问题，每次我清理输入时，键盘都会消失，我不想这样

<ion-header-bar ng-show="searchBoxEnabled">
  <div>
    <input type="search"
           ng-model="query">
    <div ng-show="query"
         ng-click="query=''"> <!--must ONLY clean the input, but is
                                  also disappearing the keyboard-->
    </div>
  </div>
  <!--must clean the input and disappear the keyboard,
      this one is working properly-->
  <div ng-click="hideSearchBox(); query=''">
    |Cancel
  </div>
</ion-header-bar>

在javascript这边我有这对函数来显示和隐藏输入

$scope.showSearchBox = function() {
  $scope.searchBoxEnabled = true;
};

$scope.hideSearchBox = function() {
  $scope.searchBoxEnabled = false;
};

Answer 1

我同意可能是输入上的 blur 事件导致键盘消失。

您可以通过按钮上的指令解决此问题，该指令在单击后重新聚焦于输入（尽管我无法验证这是否会导致键盘闪烁）。

这是一个说明性示例，您将要重新聚焦的元素的 ID 传递给：

app.directive("refocus", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      element.on("click", function() {
        var id = attrs.refocus;
        var el = document.getElementById(id);
        el.focus();
      });
    }
  }
});

用法是：

<input id="foo" ng-model="newItem">
<button ng-click="doSomething(newItem)" refocus="foo">add</button>

plunker