KnockoutJS - enlace hasFocus

Este enlace se utiliza para establecer manualmente el foco de un elemento DOM HTML a través de una propiedad ViewModel. Este también es un método de enlace bidireccional. Cuando el elemento se enfoca desde la interfaz de usuario, el valor booleano de la propiedad ViewModel también se cambia y viceversa.

Sintaxis

hasFocus: <binding-value>

Parámetros

Si el parámetro se evalúa como un valor verdadero o similar a verdadero (como Integer, objetos no nulos o cadenas no vacías), entonces el elemento DOM está enfocado, de lo contrario, no está enfocado.
Cuando el usuario enfoca o desenfoca el elemento manualmente, la propiedad Boolean ViewModel también se cambia en consecuencia.
Si el parámetro es observable, entonces el valor de los elementos se enfoca o desenfoca a medida que se cambia el observable subyacente. El elemento se procesa solo una vez, si no se utiliza ningún observable.

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en hasfocus-bind.htm archivo.
Abra este archivo HTML en un navegador.
Haga clic en el botón Establecer enfoque para establecer el enfoque en el cuadro de texto.
El color de fondo del cuadro de texto cambia cuando el foco se fija en él.

↰ Previous page