KnockoutJS - hasFocus Binding

Essa ligação é usada para definir manualmente o foco de um elemento HTML DOM por meio de uma propriedade ViewModel. Este também é um método de ligação bidirecional. Quando o elemento é focado na IU, o valor booleano da propriedade ViewModel também é alterado e vice-versa.

Sintaxe

hasFocus: <binding-value>

Parâmetros

Se o parâmetro for avaliado como verdadeiro ou valor semelhante a verdadeiro (como objetos inteiros ou não nulos ou string não vazia), o elemento DOM é focalizado, caso contrário, ele fica desfocado.
Quando o elemento é focalizado ou desfocado pelo usuário manualmente, a propriedade Boolean ViewModel também é alterada de acordo.
Se o parâmetro for observável, o valor dos elementos será focado ou desfocado conforme e quando o observável subjacente for alterado. O elemento é processado apenas uma vez, se nenhum observável for usado.

Exemplo

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da vinculação 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código acima em hasfocus-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Clique no botão Definir foco para definir o foco na caixa de texto.
A cor de fundo da caixa de texto é alterada, quando o foco é definido nela.

↰ Previous page