光标跳回输入字段

Question

I currently have the cursor auto-focus to a particular field which works as expected (when the modal is displayed). The problem is when i click on another field in that same form and begin typing, the cursor jumps back to the initial field with the autofocus attribute. Any idea what's causing this? thanks in advance

This is for an angular 1.7 project. I have tried moving the autofocus function to different locations within the controller, none of which made a difference.

//Controller

angular.module('qmsControllers').controller('ResponseCodesModalCtrl', function($scope) {
    $scope.giveFocus = function() {
        $(**'#responsecode'**).focus();
        return true;
      };
 });

//view

  <div class="form-group modal-form-group">
      <label for="code" class="col-sm-2 control-label">Response Code:</label>
        <input type="text" class="some class="0 === editMode"
               ng-change="onResponseCodeChanged($event)" 
               **id="responsecode"**
               **ng-show="giveFocus()"**
               name="code" ng-model="response" />

  </div>

The expected result is the autofocus occurring when the modal is displayed but allowing for typing in fields other than the autofocus field.

Answer 1

ng-show does not mean what you might think it means, ng-show controls whether or not the element should be shown, not "execute this function when I'm shown" So each time angular evaluates if the input element needs to be shown your element triggers an onFocus.

If you want to trigger the focus only when loading the dialog you could simply call $scope.giveFocus() at the end of the controller function. And remove the ng-show attribute

you can also use the $onInit method this method will be called by angularjs once the view has been initialized, it maybe that the element isn't in the dom yet. So something like

this.$onInit = function() {
    $(**'#responsecode'**).focus();
};