KnockoutJS-hasFocusバインディング

このバインディングは、ViewModelプロパティを介してHTML DOM要素のフォーカスを手動で設定するために使用されます。これも双方向のバインディング方法です。要素がUIからフォーカスされると、ViewModelプロパティのブール値も変更され、その逆も同様です。

構文

hasFocus: <binding-value>

パラメーター

パラメータがtrueまたはtrueに似た値（整数または非nullオブジェクトまたは非空の文字列など）に評価される場合、DOM要素はフォーカスされ、そうでない場合はフォーカスされません。
ユーザーが要素に手動でフォーカスを設定したり、フォーカスを解除したりすると、それに応じてブールのViewModelプロパティも変更されます。
パラメータが観測可能な場合、要素の値は、基礎となる観測可能値が変更されたときにフォーカスされるかフォーカスが解除されます。オブザーバブルが使用されていない場合、要素は1回だけ処理されます。

例

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>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを hasfocus-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
[フォーカスの設定]ボタンをクリックして、テキストボックスにフォーカスを設定します。
テキストボックスの背景色は、フォーカスが設定されると変更されます。

Knockoutjs-hasfocus-binding

目次

KnockoutJS-hasFocusバインディング

構文

パラメーター

例

出力