iT邦幫忙

DAY 23
9

入門AngularJS筆記與前端領域的學習筆記分享系列 第 23

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus

ng-blur是什麼?

在angular 1.2版本中,新增blur的監聽事件,
所以務必確認專案的angular版本,若版本較舊,此項指令就沒辦法work。

ng-blur可以使用在window, input, select, textarea, a,這五種標籤,
用來判斷焦點是否存在。

本次Demo是改寫男丁格爾教學所寫的範例,
主要以ng-class、ng-blur、ng-focus的結合應用。

http://jsbin.com/EhepoBe/1
範例中,
點選文字框獲得焦點,文字框底色變成黃色。
離開文字框取消焦點,文字框底色變成紅色。

另外也增加一個active的變數,獲得焦點為true、離開焦點傳回false。

ng-blur和ng-focus怎麼用?

  1. 首先建立兩個樣式,用來顯示文字框焦點是否存在的視覺效果。

    input[type="text"].myFocus {
    background-color: yellow;
    }
    input[type="text"].myBlur {
    background-color: red;
    }

  2. 使用ng-init,建立變數的初始值。

focus →是否顯示焦點存在的樣式
blur →是否顯示焦點離開的樣式
active →顯示文字框焦點是否存在

ng-init="focus=false;blur=false;active=false"
  1. 用ng-class來顯示不同的樣式。
    如果focus是true,就顯示myFocus的樣式
    如果focus是true,就顯示myBlur的樣式

    ng-class="{ myFocus: focus, myBlur: blur }"

  2. 用ng-focus和ng-blur這兩個事件,去執行不同的行為。
    ng-focus=“當焦點存在時,執行設定”
    ng-blur=“當焦點離開時,執行設定”

    ng-focus="focus=true;blur=false;active=true;" ng-blur="blur=true;focus=false;active=false;" />

完整範例:

http://jsbin.com/EhepoBe/1/edit

參考來源:

[AngularJS]AngularJS 入門教學 - ngFocus 與 ngBlur
http://abgne.tw/angularjs/angularjs-getting-stared/ngfocus-ngblur.html

官方文件
http://docs.angularjs.org/api/ng.directive:ngBlur


上一篇
Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
下一篇
Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

2 則留言

0

我要留言

立即登入留言