Linking an element's class to the focus of another element in Angular

Question

Linking an element's class to the focus of another element in Angular

In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles.

Everything in my application is working smoothly except for focusing on the input tag, which should be bound by the CSS class selected. In other words, whenever an element has the class selected, the corresponding input tag should receive focus. How can I achieve this?

<!doctype html>
<html>
  ...
</html>

javascript html css angularjs

Answer 1

Answer №1

Take a look at the following example showcasing the use of the recommended component feature in AngularJS (from version 1.5 onwards). This example is straightforward and provides a clear understanding of how to implement it in your own project.

JavaScript

class MainController {

    constructor() {
        this.focused = true;
    }

}

class MyElementController {

    constructor($element) {
        this.$element = $element;
    }

    $onChanges(changes) {
        if (changes.focused.currentValue === true) {
            this.$element[0].getElementsByTagName('input')[0].focus();
        }
    }

}

const myElementComponent = {
    bindings: {
        focused: '<'
    },
    controller: MyElementController,
    template: `<input type="text">`
};

angular
    .module('app', [])
    .controller('MainController', MainController)
    .component('myElement', myElementComponent);

HTML

<body ng-app="app" ng-controller="MainController as vm">
    <my-element focused="vm.focused"></my-element>
</body>

Answer 2

Take a look at the following example showcasing the use of the recommended component feature in AngularJS (from version 1.5 onwards). This example is straightforward and provides a clear understanding of how to implement it in your own project.

JavaScript

class MainController {

    constructor() {
        this.focused = true;
    }

}

class MyElementController {

    constructor($element) {
        this.$element = $element;
    }

    $onChanges(changes) {
        if (changes.focused.currentValue === true) {
            this.$element[0].getElementsByTagName('input')[0].focus();
        }
    }

}

const myElementComponent = {
    bindings: {
        focused: '<'
    },
    controller: MyElementController,
    template: `<input type="text">`
};

angular
    .module('app', [])
    .controller('MainController', MainController)
    .component('myElement', myElementComponent);

HTML

<body ng-app="app" ng-controller="MainController as vm">
    <my-element focused="vm.focused"></my-element>
</body>

Answer 3

Answer №2

 var customElement = {
bindings:{
     chosen:'<'
  },
  controller:function($element){
     this.$onChanges = function(changes) {
       if(changes.chosen.currentValue){
         $element[0].getElementsByClassName('textName')[0].focus()
       }
    }
  },
  template:'<input type="text" class="textName"  style="margin:4px">'
};

var dataController = function(){
   this.items = [1];
   this.chosen = 1
   this.addItem = function(){
     var length = this.items.length ;
      this.items.push(length + 1);
      this.chosen = length + 1;
   }
};


angular.module('app', [])
       .component('customComponent', customElement)
       .controller('mainCtrl', dataController);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body ng-app="app" ng-controller="mainCtrl as ctrl" >
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <button ng-click="ctrl.addItem()">Add New Item</button>
  <div ng-repeat="item in ctrl.items"  >
    <custom-component chosen="item == ctrl.chosen"  ng-click="ctrl.chosen = item"></custom-component>
  </div>
  Selected Element : {{ctrl.chosen}}
</body>
</html>

This code snippet may fulfill your needs.

Answer 4

 var customElement = {
bindings:{
     chosen:'<'
  },
  controller:function($element){
     this.$onChanges = function(changes) {
       if(changes.chosen.currentValue){
         $element[0].getElementsByClassName('textName')[0].focus()
       }
    }
  },
  template:'<input type="text" class="textName"  style="margin:4px">'
};

var dataController = function(){
   this.items = [1];
   this.chosen = 1
   this.addItem = function(){
     var length = this.items.length ;
      this.items.push(length + 1);
      this.chosen = length + 1;
   }
};


angular.module('app', [])
       .component('customComponent', customElement)
       .controller('mainCtrl', dataController);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body ng-app="app" ng-controller="mainCtrl as ctrl" >
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <button ng-click="ctrl.addItem()">Add New Item</button>
  <div ng-repeat="item in ctrl.items"  >
    <custom-component chosen="item == ctrl.chosen"  ng-click="ctrl.chosen = item"></custom-component>
  </div>
  Selected Element : {{ctrl.chosen}}
</body>
</html>

This code snippet may fulfill your needs.

Answer 5

Answer №3

When a key is pressed or the input is updated, the script checks the class and utilizes focus() and blur() to modify the input states. If the tab key is pressed, it will prevent the default behavior.

angular
  .module('myApp',[])
  .controller('ListController', function($scope) {
    var listctrl = this;
    listctrl.list = ['1','2','3'];
    listctrl.selected = 0;

    listctrl.addCell = function() {
      var x = listctrl.list.length;
      listctrl.list.push(x);
      listctrl.selected = listctrl.list.length - 1;
    }

    listctrl.addCell();

    $scope.$on('add', function (event, message) {
      $scope.$apply(listctrl.addCell);
    });

    $scope.$on('keyUp', function(event) {
      $scope.$apply(function(){
        listctrl.selected = listctrl.selected - 1;
      });
    });

    $scope.$on('keyDown', function(event) {
      $scope.$apply(function(){
        listctrl.selected = listctrl.selected + 1;
      });
    });
  })
  .directive('myelement', function($rootScope){
    return {
      template: '<input style="width: 95%"></input>',
      restrict: 'E',
      scope: {},
      link: function (scope, element, attrs) {
        var inputTag = element[0].children[0];
        var updateFocues = function(element) {
          if(element[0].className.indexOf('selected') !== -1) {
            scope.$apply(function() {
              inputTag.focus()
            });
          } else {
            scope.$apply(function() {
              inputTag.blur()
            });
          }    
        }

        element.on('keydown', function(event) {
          if (event.keyCode === 13 && event.shiftKey) {
            $rootScope.$broadcast('add');
          } else if (event.keyCode === 38) {
            $rootScope.$broadcast('keyUp');
          } else if (event.keyCode === 40) {
            $rootScope.$broadcast('keyDown');
          }else if (event.keyCode === 9) {
            event.preventDefault();
          }
        });
        

        scope.$on('keyUp', function() {
          updateFocues(element)
        })
        scope.$on('keyDown', function() {
          updateFocues(element)
        })
      },
      controller: function ($scope) {

      }
    };
  })

 .container {
      display: flex;
      flex-direction: column;
      width: 600px;
    }
    .notebook {
      display: flex;
      justify-content: center;
    }
    .cell {
      margin: 5px;
      padding: 5px;
    }
    .selected {
      border-style: solid;
      border-color: green;
      border-width: 1px;
      border-left-width: 5px;
    }

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>

<body ng-app="myApp">

<div ng-controller="ListController as listctrl" class="notebook">

  <div class="container">
    <myelement ng-repeat="i in listctrl.list"
        ng-click="listctrl.selected = $index"
        ng-class="{selected : listctrl.selected === $index}"
        class="cell"></myelement>
  </div>
</div>
</body>
</html>

Answer 6

When a key is pressed or the input is updated, the script checks the class and utilizes focus() and blur() to modify the input states. If the tab key is pressed, it will prevent the default behavior.

angular
  .module('myApp',[])
  .controller('ListController', function($scope) {
    var listctrl = this;
    listctrl.list = ['1','2','3'];
    listctrl.selected = 0;

    listctrl.addCell = function() {
      var x = listctrl.list.length;
      listctrl.list.push(x);
      listctrl.selected = listctrl.list.length - 1;
    }

    listctrl.addCell();

    $scope.$on('add', function (event, message) {
      $scope.$apply(listctrl.addCell);
    });

    $scope.$on('keyUp', function(event) {
      $scope.$apply(function(){
        listctrl.selected = listctrl.selected - 1;
      });
    });

    $scope.$on('keyDown', function(event) {
      $scope.$apply(function(){
        listctrl.selected = listctrl.selected + 1;
      });
    });
  })
  .directive('myelement', function($rootScope){
    return {
      template: '<input style="width: 95%"></input>',
      restrict: 'E',
      scope: {},
      link: function (scope, element, attrs) {
        var inputTag = element[0].children[0];
        var updateFocues = function(element) {
          if(element[0].className.indexOf('selected') !== -1) {
            scope.$apply(function() {
              inputTag.focus()
            });
          } else {
            scope.$apply(function() {
              inputTag.blur()
            });
          }    
        }

        element.on('keydown', function(event) {
          if (event.keyCode === 13 && event.shiftKey) {
            $rootScope.$broadcast('add');
          } else if (event.keyCode === 38) {
            $rootScope.$broadcast('keyUp');
          } else if (event.keyCode === 40) {
            $rootScope.$broadcast('keyDown');
          }else if (event.keyCode === 9) {
            event.preventDefault();
          }
        });
        

        scope.$on('keyUp', function() {
          updateFocues(element)
        })
        scope.$on('keyDown', function() {
          updateFocues(element)
        })
      },
      controller: function ($scope) {

      }
    };
  })

 .container {
      display: flex;
      flex-direction: column;
      width: 600px;
    }
    .notebook {
      display: flex;
      justify-content: center;
    }
    .cell {
      margin: 5px;
      padding: 5px;
    }
    .selected {
      border-style: solid;
      border-color: green;
      border-width: 1px;
      border-left-width: 5px;
    }

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>

<body ng-app="myApp">

<div ng-controller="ListController as listctrl" class="notebook">

  <div class="container">
    <myelement ng-repeat="i in listctrl.list"
        ng-click="listctrl.selected = $index"
        ng-class="{selected : listctrl.selected === $index}"
        class="cell"></myelement>
  </div>
</div>
</body>
</html>

Answer 7

Answer №4

It is recommended to utilize CSS instead of adding unnecessary JavaScript code for simple functionalities. This will ensure better efficiency and cleaner code structure.

Learn more about the :focus selector on W3C's website.

For example, you can use the following CSS code:

.myelement input:focus {
  border-style: solid;
  border-color: green;
  border-width: 1px;
  border-left-width: 5px;
}

Answer 8

It is recommended to utilize CSS instead of adding unnecessary JavaScript code for simple functionalities. This will ensure better efficiency and cleaner code structure.

Learn more about the :focus selector on W3C's website.

For example, you can use the following CSS code:

.myelement input:focus {
  border-style: solid;
  border-color: green;
  border-width: 1px;
  border-left-width: 5px;
}

Linking an element's class to the focus of another element in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The pagination feature in ui-bootstrap-tpls 1.0.0 or later versions is not showing up as expected

The browser is not displaying the results from Mongodb, yet they are appearing in the console

Tips for utilizing the Toggle Slider JS functionality

What is the most creative way you can think of to create a CSS/JS animated

React onClick event image attribute is unique because it allows for interactive

Accessing form data within Mongoose schema hooks via JavaScript

What is the process for inserting HTML content into the body of an iframe?

FormController instance cannot be found within the parent scope

Does turning off javascript in a browser impact ajax requests and javascript functions?

When FullCalendar eventRender is called, it can cause the browser tab to become

Issue with strange symbols appearing in Safari on Mac

Utilizing dispatch sequentially within ngrx StateManagement

What is the reason behind a PHP page refresh causing a session variable to be released

Having trouble scrolling with Selenium WebDriver and JavaScript Executor

Printing Strings in JavaScript IF Conditional Block

The integration of VueJS with Axios and the Google Maps API

Is it possible to trigger an event each time an Ajax request is made within AngularJS?

The ng-repeat track by function is not functioning as expected, displaying slow performance and continuing to create $$hashKey

Paging in Ext JS does not function properly when using local data sources

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'