javascript - 如何在不隐藏键盘的情况下清理输入搜索？ (移动的)

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