Angular无法获取屏幕键盘输入的JavaScript

Question

Angular无法获取屏幕键盘输入的JavaScript

javascripthtmlangularjskeyboardon-screen-keyboard

3

我正在制作一个包含输入字段和屏幕键盘的页面，使用js实现。我使用了这个键盘：http://jabtunes.com/notation/keyboardcanvasexamples.html

输入字段可以正常接收输入，但问题是与该输入字段相关的Angular筛选器无法工作。我在这个plunker中找到了类似的问题，但没有解决方案：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
];
}

当使用屏幕键盘打字时，没有任何筛选器响应。但是当使用真实键盘打字时，它们会得到更新并进行相应的数据筛选。为什么会出现这种情况？

感谢您的帮助！

- Zahnstochermann

正如@user3651406所指出的那样，问题在于jKeyboard.js无法模拟真实的键盘事件。您需要自己修改jKeyboard.js，至少触发一个“输入”事件，或者找到另一个更强大的库。 - runTarm

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NicBright · Accepted Answer

简短回答：
我认为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()。

希望我能以某种方式帮到你！