KnockoutJS - hasFocus Binding

Questa associazione viene utilizzata per impostare manualmente lo stato attivo di un elemento DOM HTML tramite una proprietà ViewModel. Questo è anche un metodo di rilegatura a due vie. Quando l'elemento è focalizzato dall'interfaccia utente, viene modificato anche il valore booleano della proprietà ViewModel e viceversa.

Sintassi

hasFocus: <binding-value>

Parametri

  • Se il parametro restituisce un valore true o true (come oggetti interi o non nulli o una stringa non vuota), l'elemento DOM è focalizzato, altrimenti non è focalizzato.

  • Quando l'elemento viene messo a fuoco o sfocato manualmente dall'utente, anche la proprietà Boolean ViewModel viene modificata di conseguenza.

  • Se il parametro è osservabile, il valore dell'elemento è focalizzato o non focalizzato quando e quando l'osservabile sottostante viene modificato. L'elemento viene elaborato una sola volta, se non viene utilizzato alcun osservabile.

Esempio

Diamo uno sguardo al seguente esempio che dimostra l'uso dell'associazione 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato hasfocus-bind.htm file.

  • Apri questo file HTML in un browser.

  • Fare clic sul pulsante Imposta focus per impostare lo stato attivo sulla casella di testo.

  • Il colore di sfondo della casella di testo viene modificato quando il focus è impostato su di esso.