溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1. 寫在前面
關于如何獲取input框、textarea等的焦點，網上有許多文章都只是會跟你說ng-focus這個內置指令。像這種解答，只能說明作者并為真正理解人家的需求。ng-focus是一個事件，跟原生JS（JavaScript）的onfocus是一樣的，當我們點擊input框時，就會觸發該事件，而在該事件里我們可以調用一個函數。所以，當人家問你如何獲取焦點時一般的意思是，如果我進行了某些操作后，不用鼠標點擊是如何自動獲取焦點，問題的關鍵是“自動”。
因為AngularJS沒有像原生JS那樣可通document.getElementById("idVlaue")直接獲取元素的功能，所以只能通過自定義指令的方式實現，所以需要實現這個，我們還得有angularjs自定義指令的基礎。可參考：https://www.jb51.net/article/115979.htm
2. 代碼示例
各位看官，芭蕉即焦點，如有戳中你的笑點，概不負責。溫馨提示：下面代可直接拿去編輯器運行看效果哦，哎，沒辦法，就是這么負責。
<!-- 傳說芭蕉扇乃鐵扇公主唾液所化，因此可重復取 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="control">
<input type="text" set-Focus ng-blur="setBlur()">
<button ng-click="getFocus()">孫爺爺我要去取芭蕉扇了</button>
</div>
<script type="text/javascript">
//模型
var app = angular.module('myApp',[]);
//控制器
app.controller("control",function($scope){
$scope.isCome = false; //判斷大圣來了沒
$scope.isFocus = false; //判斷是不是要取芭蕉扇
$scope.getFocus = function(){
$scope.isFocus = true; //大圣來了
$scope.isCome = true; //要取芭蕉扇
};
$scope.setBlur = function(){
$scope.isFocus = false;//沒人要來取芭蕉扇了
}
});
//自定義指令
app.directive('setFocus',[ function(){
return {
scope:false,
link:function(scope, element){
scope.$watch("isFocus",function(newValue,oldValue, scope) {
//大圣來了，且要取芭蕉扇
if(newValue && scope.isCome){
element[0].focus(); //獲取焦點
alert("猴哥，老牛不在家，我一介女子還不是你說什么我就照做，可你進入人家的身體也不打聲招呼，進了就進了，還搞得我那么難受，求你別搞了，給，芭~~~蕉~~~扇！")
}
}, true);;
}
};
}]);
</script>
</body>
</html>
3. 代碼說明
首先說明一下，我本后臺Java工程師，因前端大牛搭了AngularJS后卻辭職去了新浪，一下無人接手，我便自告奮勇接了活。為了啥？為了漲工資塞！
該文默認讀者對angualrJS有一定的基礎語法，此文的亮點在哪呢？亮點在于實現獲取焦點的邏輯。angularjs文檔只會告訴你用自定義指令獲取焦點，如代碼：
<body>
<div ng-app="myApp" >
<input type="text" set-Focus>
</div>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.directive('setFocus', function(){
return function(scope, element){
element[0].focus();
};
});
</script>
</body>
這塊代碼，除了能進入頁面獲取焦點，還能干啥？還能告訴初學者說，親，自定義指令里面還可以直接return 一個function喲。
正式說說我是如何實現執行一些操作后實現獲取焦點的：
首先自定義指令會用不必說了，可親們是否還知道自定義里有一個屬性叫scope啊？在我提供的鏈接的文章有說明它有兩個值類型，boolean和對象，那里面的示例只說了值為對象的例子，但為boolean時沒有說過。
既然我們需要在進行某個操作后再獲取焦點，那么就需要我們能同時操作自定義指令與控制器里的變量，如第一例子里的isCome和isFocus。而在scope說明中這樣寫到：scope值為false(默認值): 使用父作用域作為自己的作用域。為true時: 新建一個作用域，該作用域繼承父作用域。所以我們默認就可以直接在自定義指令里操作控制器里的變量。于是我就又用到了監聽$watch,這是個什么鬼？后面會寫個小文專門解釋。只要監聽到變化后的結果符合獲取焦點的要求，我們就執行element[0].focus();來獲取焦點。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
