Menu
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!
200
asked Mar 24 '26 14:03
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!
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
