CODEWITHSUNDEEP
javascriptangularjsionic-framework
Non
Non

Reputation: 8589

How to clean the input search without hiding the keyboard ? (mobile)

I am using Ionic/AngularJS and that's my question, every time I clean up the input, the keyboard disappears and I don't want that

<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>

and in the javascript side I have this couple functions in order to show and hide the input

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

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

Upvotes: 2

Views: 841

Answers (1)

New Dev
New Dev

Reputation: 49590

I agree that it is probably the blur event on the input that causes the keyboard to go away.

You could solve this with a directive on the button that refocuses on the input following a click (although I have no way to verify whether this would cause a flicker with a keyboard).

Here's an illustrative example where you pass the ID of the element that you want to refocus to:

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

and the usage is:

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

plunker

Upvotes: 2

Related Questions