Angular不支持javascript屏幕上的键盘输入

Angular does not get javascript onscreen keyboard input

本文关键字：键盘 输入 屏幕 不支持 javascript Angular      更新时间：2023-09-26

我在一个页面上工作，应该有一个输入字段和一个屏幕上的键盘，在js中实现。我用的是这个键盘:http://jabtunes.com/notation/keyboardcanvasexamples.html

输入字段得到输入很好，问题是依赖于这个输入字段的角过滤器不起作用。有一个类似的问题，我发现在这个柱塞描述没有解决方案: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
];
}

当使用屏幕键盘输入时，没有过滤器响应，但使用真实键盘输入时，它们得到更新，数据也相应地被过滤。为什么?

谢谢你的帮助!

短答:
我认为Angular不会意识到这里$scope的任何变化(当点击屏幕键盘时)。

为什么会这样?
免责声明:我也是AngularJS的新手。所以我的解释在某些方面可能是错误的。然而，第一个分析向我显示，您的jkeyboard.js似乎直接操纵内容。它不模拟真正的键盘，因为它不会分别触发keydown事件或keypress事件。我还看了一下angular-ui的typeahead指令。在这里，它们至少侦听一些keydown事件(尽管不是全部):

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

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

这个问题本身肯定会导致兼容性问题。

你能做些什么?
你可以自己写一个指令来修补你的jkeyboard.js，在适当的时候触发适当的事件和/或调用$scope.$apply()。

希望我能帮上忙!

相关文章：