AngularJS ng-blur, ng-focus

參考入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus,來練習一下 ng-blur跟 ng-focus。

準備 html
  1. <div ng-app ng-init="focus=false;blur=false;active=false">  
  2. <input type="text" ng-class="{ myFocus: focus, myBlur: blur }"    ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">  
  3.     <p>focus: {{focus}}</p>  
  4.     <p>blur: {{blur}} </p>  
  5.     </div>  

準備改變的 css
  1. input[type="text"].myFocus {     
  2.         background-color: yellow;     
  3.     }     
  4. input[type="text"].myBlur {     
  5.         background-colorred;     
  6.     }    

簡單說就是去偵測 html 上的 focus 跟 event ,改變賦予的變數後,從 ng-class 去顯示狀態。

Demo

留言