AngularJS ng-blur, ng-focus

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

準備 html

view plaincopy to clipboardprint

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

view plaincopy to clipboardprint

1. input[type="text"].myFocus {     
2.         background-color: yellow;     
3.     }     
4. input[type="text"].myBlur {     
5.         background-color: red;     
6.     }    

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

Demo