Pregunta AngularJS: autoenfoque de entrada con ng, si no funciona


Cuando rodeo mi input con ng-if, después de ocultar y mostrar el autofocus atributo no tiene efecto:

Aquí está el código:

  <!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-init="view={}; view.show = true">
    <button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
    <div ng-if="view.show">
      <input autofocus />
    </div>
  </body>
</html>

Y aquí está el plunker: http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview

Simplemente haga clic en ocultar y luego en show y verá que el enfoque automático no funciona.

En Cromo está trabajando solo en el primer show, en FF y ES DECIR no está funcionando del todo!


12
2018-03-28 09:59


origen


Respuestas:


El problema es el atributo autofocus no es una directiva angular. Es un Especificación soportada por el navegador de la <input> elemento. Si desea que esto funcione según lo previsto en varios navegadores y enfoque automático cada vez que haga clic en ocultar / mostrar, tendrá que hacer una directiva.

Tomé esta directiva de inmediato Github Gist, crédito a mlynch para construir esta directiva.

Aquí hay un ejemplo de trabajo de su aplicación

angular  
    .module('App', [  
        'utils.autofocus',
    ]);
    
/**
 * the HTML5 autofocus property can be finicky when it comes to dynamically loaded
 * templates and such with AngularJS. Use this simple directive to
 * tame this beast once and for all.
 *
 * Usage:
 * <input type="text" autofocus>
 * 
 * License: MIT
 */
angular.module('utils.autofocus', [])

.directive('autofocus', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link : function($scope, $element) {
      $timeout(function() {
        $element[0].focus();
      });
    }
  }
}]);
<!DOCTYPE html>
<html ng-app="App">

  <head  ng-init="view={}; view.show = true">
    <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
  </body>
  
  <div ng-if="view.show">
    <input autofocus />
  </div>

    <script src="script.js"></script>
</html>


16
2018-03-28 10:13



Puedes usar una directiva para esto. Demostración Plunker

angular.module('myApp', []).directive('focusMe', function($timeout) {
    return {
        scope: {
            focusMeIf:"="
        },
        link: function ( scope, element, attrs ) {
            if (scope.focusMeIf===undefined || scope.focusMeIf) {
                $timeout( function () { element[0].focus(); } );
            }
        }
    };
});

También podría definir una condición en él en focus-me-if atributo en ella.

Espero eso ayude.


3
2018-03-28 10:10



En primer lugar, debe envolver el div y su contenido dentro del elemento del cuerpo. Lo tienes afuera. Por favor corrígelo.

El elemento de entrada no debe estar en blanco y puede no funcionar a veces. por favor agrega un atributo más como nombre y type = "texto" o apropiado Esta es la característica html5 y debería comenzar con <! DOCTYPE html>.

Tenga en cuenta : The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.visita aquí para más detalles


-1
2018-03-28 10:09



Preguntas populares