CODEWITHSUNDEEP
angularjs
Durga
Durga

Reputation: 15604

angular-virtual-keyboard not opening on focus

var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',MyCtrl);

function MyCtrl($scope) {
    document.getElementsByTagName('input')[0].focus();
}
<link href="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.js"></script>

<body ng-app='myApp'>
  <div ng-controller="MyCtrl">
    <input type='text' ng-model="textValue" ng-virtual-keyboard/>
  </div>
</body>

If I click on input then virtual keyboard is opening. But how can I open the keyboard without click. I tried using input.focus() that didn't work.

Upvotes: 0

Views: 975

Answers (2)

jitender
jitender

Reputation: 10429

Just find a working fiddle Here with an directive auto focus

    var myApp = angular.module('myApp',['angular-virtual-keyboard']);

myApp.controller('MyCtrl',function($scope) {
});
  


myApp.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});
<link href="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
    <script src="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.js"></script>

    <body ng-app='myApp'>
      <div ng-controller="MyCtrl">
        <input type='text' ng-model="textValue" auto-focus ng-virtual-keyboard/>
      </div>
    </body>

Upvotes: 1

Eduard Void
Eduard Void

Reputation: 2714

You are doing change outside angularJS framework, so you need to apply it by $scope.$apply();

var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',MyCtrl);

function MyCtrl($scope) {
    document.getElementsByTagName('input')[0].focus();
    $scope.$apply();
}

Upvotes: 0

Related Questions