当我在一个字段中键入时,其自动键入另一个字段

时间:2018-12-29 13:12:36

标签: angularjs angularjs-directive angularjs-scope

在我的项目中,我使用的是自定义键盘。问题在于,当自定义键盘指令在两个输入字段中使用时,当我在一个输入字段中键入某些内容然后在另一输入字段中自动键入内容时。例如,有A和B是我的两个输入字段,并且两个ng-model都不相同,但是相同的是我的自定义键盘指令名称(如my-text),现在当我在A输入字段中键入内容时,它会自动键入B.这是我已完成的代码,请检查并纠正我的问题。

HTML代码

<div class="">
        <input id="attrcls" type="text" ng-model="test"  style="width: 40%;" class="form-control input-md" ng-focus="onFocus('attrcls')" my-text>

        <input id="attrcls1" type="text" ng-model="test1" style="width: 40%;" class="form-control input-md" ng-focus="onFocus('attrcls')">
          <div class="keyboard-container"  ng-if="!focused">
              <ul ng-repeat="row in layout track by $index" style="list-style-type: none;">
                  <li ng-if="element.action != 'esc'" ng-repeat="element in row.row track by $index" class="btn" ng-click="keyPressed(element.value, element.action)">
                    {{element.value}}
                  </li>
                  <li ng-if="element.action == 'esc'" ng-repeat="element in row.row track by $index" class="btn" ng-click="keyPressed(element.value, element.action)"  ng-blur = "onBlur()">
                    {{element.value}}
                  </li>
              </ul>
          </div>
    </div>

控制器代码

$scope.keyPressed = function(value, action){
        $scope.someInput = value;
        $rootScope.$broadcast('keyPressed', $scope.someInput, action);
    }

      $scope.focused = true;
      $scope.onFocus = (id)=>{
        if($scope.focused){
            $scope.focused = false;
        }
      }
      $scope.onBlur = ()=>{
        $scope.focused = true;
      }

指令代码

  .directive('myText', ['$rootScope', function($rootScope) {
    return {
        link: function(scope, element, attrs) {
            $rootScope.$on('keyPressed', function(e, val, action) {
                var domElement = element[0];
                if (document.selection) {
                    domElement.focus();
                    var sel = document.selection.createRange();
                    sel.text = val;
                    domElement.focus();
                }
                else if (domElement.selectionStart || domElement.selectionStart === 0) {
                    var startPos = domElement.selectionStart;
                    var endPos = domElement.selectionEnd;
                    var scrollTop = domElement.scrollTop;

                    if(action === 'del'){
                        if(startPos === endPos){
                            domElement.value = domElement.value.substring(0, startPos-1) + domElement.value.substring(endPos, domElement.value.length);
                            domElement.focus();
                            domElement.selectionStart = startPos - 1;
                            domElement.selectionEnd = startPos - 1;
                        }
                        else{
                            domElement.value = domElement.value.substring(0, startPos) + domElement.value.substring(endPos, domElement.value.length);
                            domElement.focus();
                            domElement.selectionStart = startPos;
                            domElement.selectionEnd = startPos;
                        }

                        domElement.scrollTop = scrollTop;
                    }else if(action === 'esc'){
                            $(".keyboard-container").css("display","none");
                            $("#attrcls").removeAttr('my-text');
                    }else{
                        domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
                        domElement.focus();
                        domElement.selectionStart = startPos + val.length;
                        domElement.selectionEnd = startPos + val.length;
                        domElement.scrollTop = scrollTop;
                    }
                } else {
                    domElement.value += val;
                    domElement.focus();
                }
            });
        }
    }
}])

1 个答案:

答案 0 :(得分:-1)

键盘(及其布局)通常由operating system软件的某一层(或操作系统启动的某些实用程序)管理。这可能取决于您的desktop environment

在Linux上,display server(例如Xorg)知道键盘布局。

AngularJs没有直接连接。如果您使用它,则某些web browser正在处理键盘布局(而浏览器,例如firefox或chrome-不是您的应用程序-会知道键盘布局的变化,并且可能会由显示服务器或{{ 3}};例如,查看Xorg服务器将在Linux上发送给浏览器的X11 window manager事件;在Windows上,请参见keymap-notify中的keyboard input函数和相关功能。)