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

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