Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

can't trigger focus on a textbox in angular and ionic

I'm trying to set focus on a textbox through an onclick trigger and it doesn't seem to work in my ionic angular implementation. It works if I take it out of angluar and ionic

Here's the template

<ion-view title="Create">
  <ion-content class="has-header">
     <div>
        <input type="text" placeholder="focus here" id="test" />
        <button ng-click="test()">TEST</button>
      </div>
  </ion-content>
</ion-view>

And the js

$scope.test = function(){
    document.getElementById('test').focus();
  };
like image 443
MonkeyBonkey Avatar asked Sep 28 '14 00:09

MonkeyBonkey


2 Answers

I found out the answer from the forum: http://forum.ionicframework.com/t/focus-method-doesnt-work-on-input-textarea-etc/5606/14

Turns out you need to add the Ionic Keyboard plugin and add these preferences in the config.xml:

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

<feature name="Keyboard">
  <param name="ios-package" value="IonicKeyboard" onload="true" />
</feature>

After that, the focus() function will work.

like image 142
Indra Adam Avatar answered Nov 11 '22 17:11

Indra Adam


Easiest and quickest way for me to accomplish this was as follows:

$scope.test = function(){
    $timeout(function () {
        document.getElementById('test').select();
    }, 0);
};
like image 25
Rob Avatar answered Nov 11 '22 17:11

Rob