KnockoutJS - Liaison hasFocus

Cette liaison est utilisée pour définir manuellement le focus d'un élément HTML DOM via une propriété ViewModel. Il s'agit également d'une méthode de liaison bidirectionnelle. Lorsque l'élément est focalisé à partir de l'interface utilisateur, la valeur booléenne de la propriété ViewModel est également modifiée et vice versa.

Syntaxe

hasFocus: <binding-value>

Paramètres

  • Si le paramètre prend la valeur true ou true (comme un entier ou des objets non nuls ou une chaîne non vide), alors l'élément DOM est focalisé, sinon il n'est pas focalisé.

  • Lorsque l'élément est focalisé ou non focalisé manuellement par l'utilisateur, la propriété Boolean ViewModel est également modifiée en conséquence.

  • Si le paramètre est observable, alors la valeur des éléments est focalisée ou non focalisée au fur et à mesure que l'observable sous-jacente est modifiée. L'élément n'est traité qu'une seule fois, si aucune observable n'est utilisée.

Exemple

Jetons un coup d'œil à l'exemple suivant qui illustre l'utilisation de la liaison hasFocus.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS hasFocus Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Enter primary contact number : <input data-bind = "
         value: primaryContact,
         hasFocus: contactFlag,

         style: { 
            'background-color': contactFlag() ? 'pink' : 'white' 
         } " />
         
      </p>

      <button data-bind = "click: setFocusFlag">Set Focus</button>

      <script type = "text/javascript">
         function ViewModel() {
            this.primaryContact = ko.observable();
            this.contactFlag = ko.observable(false);

            this.setFocusFlag = function() {
               this.contactFlag(true);
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans hasfocus-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Cliquez sur le bouton Définir le focus pour définir le focus sur la zone de texte.

  • La couleur d'arrière-plan de la zone de texte est modifiée lorsque le focus y est défini.