[AngularJS]AngularJS 入門教學 - ngFocus 與 ngBlur

還記得在 AngularJS 入門教學 - ngCalss 所學過的技巧嗎？今天筆者要利用 ng-class 來介紹兩個還算常使用的網頁元素事件 - ng-focus 與 ng-blur。

首先準備一個簡單的 HTML：

1
2
3
4
5
6
7
8
9
10
11

<style>
	input[type="text"].myFocus {
		background-color: yellow;
	}
	input[type="text"].myBlur {
		background-color: red;
	}
</style>
<div class="well span4" style="margin-top:20px;" ng-init="focus=false;blur=false;">
	<input type="text" ng-class="{ myFocus: focus, myBlur: blur }" ng-focus="focus=true;">
</div>

如果看到這邊就卡住的話，那...請先到 AngularJS 入門教學 - ngCalss 再重頭看一次吧。

接著，讓筆者在輸入方塊上加入當它取得焦點時的動作：

1

<input type="text" ng-class="{ myStyle: focus }" ng-focus="focus=true;">

這邊只是使用 ng-focus Angular 表達式(Angular Expressions)來將 focus 變數設定為 true。

現在可以看到輸入方塊並沒有套上任何 class 樣式。但如果當我們點擊一下輸入方塊使其取得焦點時：

因為雙向資料綁定(Two-way data-binding)的關係，所以輸入方塊就會自動被套上相對應的 class 樣式囉。

同樣的，ng-blur 也就是當元素失去焦點時的控制囉：

1
2
3

<div class="well span4" style="margin-top:20px;" ng-init="focus=false;blur=false;">
	<input type="text" ng-class="{ myFocus: focus, myBlur: blur }" ng-focus="focus=true;" ng-blur="focus=false;">
</div>

筆者在 ng-class 所指定的物件中多加了一個 myBlue 屬性，只要 blur 變數是 true 的話，嘿嘿嘿...

當只有取得焦點時，只有套上 myFocus 的樣式，那當失去焦點時...

有看到套上 myBlue 樣式了嗎？使用起來就是那麼簡單，基本上 window、input, select、textarea, a 等元素都能使用 ng-focus 與 ng-blur 指令。

嗯哼~聰明的各位一定也看到明明就失去焦點但 myFocus 樣式還在吧，這就當成作業讓各位去修正它囉！