When i type in one field then its auto type another field

Question

In my project i am using custom keyboard.The problem is that, when custom keyboard directive use in two input field that time when i am type something in one input field then its auto type in another input field. For example, there is A and B is my two input fields and both ng-model is different but same my custom keyboard directive name like my-text both of them, Now when i am type something in A input field then its automatically Type in B. Here is my code which i have done, please check and rectify my issue.

HTML Code

<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>

Controller code

$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 Code

  .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();
                }
            });
        }
    }
}])

Answer 1

The keyboard (and its layout) is usually managed by some layer of your operating system software (or some utility started by the OS). It could depend upon your desktop environment.

On Linux, the keyboard layout is known to your display server (e.g. Xorg).

There is no direct connection with AngularJs. If you use that, some web browser is handling the keyboard layout (and the browser, e.g. firefox or chrome -not your application- would be aware of keyboard layout changes, and perhaps be notified by the display server or the window manager; for example look into X11 keymap-notify events that the Xorg server would send on Linux to the browser; on Windows see keyboard input functions and related in the WinAPI).