2015-02-11 103 views
2

我使用的離子/ 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; 
}; 
+0

我不認爲它清楚了隱藏鍵盤的輸入,它是點擊按鈕。單擊該按鈕會在輸入上觸發模糊事件。在您的hideSearchBox()函數中,重新調整輸入元素。這可能會導致鍵盤隱藏然後重新出現。 – 2015-02-11 22:22:37

+0

那麼,我能做些什麼? @ConnorFinnMcKelvey – NietzscheProgrammer 2015-02-11 22:45:44

+0

在'ng-click'中,您可以重新對焦輸入,以便鍵盤再次出現。我想你會想爲此創建一個指令。或者讓用戶自己再次點擊輸入。 – Rhumborl 2015-02-11 23:02:18

回答

2

我同意,這可能是針對導致鍵盤走開輸入的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

+0

如果你添加的離子束.js文件的代碼將停止工作 code.ionicframework.com/nightly/js/ionic.bundle.js – Gino 2017-05-08 17:35:21