Angular does not get javascript onscreen keyboard input

Question

i'm working on a page that should have an input field and an onscreen keyboard, implemented in js. I used this keyboard: http://jabtunes.com/notation/keyboardcanvasexamples.html

The input field gets the input just fine, the problem is that the angular filters depending on this input field don't work. There is a similar problem i found described in this plunker with no solution: http://plnkr.co/edit/FnrZTAwisYub5Vukaw2l?p=preview

html:

<html ng-app="plunker">
  <head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <script src="jKeyboard.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <pre>Model: {{selected| json}}</pre>
    <input type="text" ng-model="selected" id="testInput" typeahead="state.name for state in states | filter:$viewValue | limitTo:8">
</div>
    <button id="btn">E</button>
  </body>
</html>

js:

angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {

  $scope.selected = undefined;

$scope.WatchPrintList = function () {
        $scope.selected= {};
        $scope.$watch('#testInput', function(newVal, oldVal) {
            $scope.selected = newVal;
        }, true);
    }

  $scope.states = [
{"name":"Alabama","alpha-2":"AL"},
{"name":"Alaska","alpha-2":"AK"},
//etc etc
];
}

When typing with the onscreen keyboard, no filters respond, but typing with the real keyboard they get updated and the data is filtered accordingly. Why?

Thx for your help!

As @user3651406 pointed out, the problem is that jKeyboard.js doesn't mimic a real keyboard events. You need to modify the jKeyboard yourself, at least to trigger an 'input' event. Or find another library that is more robust. — runTarm, Aug 04 '14 at 16:42

score 1 · Answer 1 · answered Aug 04 '14 at 16:22

Short answer:
I think Angular is not aware of any $scope changes here (when clicking your on-screen-keyboard).

Why is this?
Disclaimer: I'm new to AngularJS as well. So my explanation might be wrong in some points. A first analysis, however, showed to me that your jkeyboard.js seems to directly manipulate the content. It does not mimic a real keyboard, because it does not fire a keydown event, or keypress, respectively. I also had a look at the typeahead directive of angular-ui. Here, they at least listen for some keydown events (although not entirely):

//bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27)

(See https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js#L268)

This issue alone will certainly cause compatibility problems.

What can you do about it?
Possibly write a directive yourself, which takes care of patching your jkeyboard.js, in a way that the appropriate events are fired and/or that $scope.$apply() is called at the right moment.

Hope I could help somehow!

I don't think the `$scope.$apply()` will help. But yes, you are correct, the key to this problem is that the jKeyboard doesn't mimic a real keyboard i.e. not trigger any events. — runTarm, Aug 04 '14 at 16:30
Alright, thx for the suggestions! Do you guys think that there is some easy way to change the js-keyboard in a way so it will mimic a real keyboard - say, trigger keydown events etc.? — Zahnstochermann, Aug 08 '14 at 14:55

Angular does not get javascript onscreen keyboard input

1 Answers1