深究AngularJS如何獲取input的焦點(diǎn)（自定義指令）

發(fā)布時(shí)間：2020-10-14 09:28:07 來(lái)源：腳本之家閱讀：166 作者：zcl_love_wx 欄目：web開(kāi)發(fā)

1. 寫(xiě)在前面

關(guān)于如何獲取input框、textarea等的焦點(diǎn)，網(wǎng)上有許多文章都只是會(huì)跟你說(shuō)ng-focus這個(gè)內(nèi)置指令。像這種解答，只能說(shuō)明作者并為真正理解人家的需求。ng-focus是一個(gè)事件，跟原生JS（JavaScript）的onfocus是一樣的，當(dāng)我們點(diǎn)擊input框時(shí)，就會(huì)觸發(fā)該事件，而在該事件里我們可以調(diào)用一個(gè)函數(shù)。所以，當(dāng)人家問(wèn)你如何獲取焦點(diǎn)時(shí)一般的意思是，如果我進(jìn)行了某些操作后，不用鼠標(biāo)點(diǎn)擊是如何自動(dòng)獲取焦點(diǎn)，問(wèn)題的關(guān)鍵是“自動(dòng)”。

因?yàn)锳ngularJS沒(méi)有像原生JS那樣可通document.getElementById("idVlaue")直接獲取元素的功能，所以只能通過(guò)自定義指令的方式實(shí)現(xiàn)，所以需要實(shí)現(xiàn)這個(gè)，我們還得有angularjs自定義指令的基礎(chǔ)?？蓞⒖迹篽ttps://www.jb51.net/article/115979.htm

2. 代碼示例

各位看官，芭蕉即焦點(diǎn)，如有戳中你的笑點(diǎn)，概不負(fù)責(zé)。溫馨提示：下面代可直接拿去編輯器運(yùn)行看效果哦，哎，沒(méi)辦法，就是這么負(fù)責(zé)。

<!-- 傳說(shuō)芭蕉扇乃鐵扇公主唾液所化，因此可重復(fù)取 -->
<!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;  //判斷大圣來(lái)了沒(méi)
  $scope.isFocus = false;  //判斷是不是要取芭蕉扇

  $scope.getFocus = function(){
   $scope.isFocus = true; //大圣來(lái)了
   $scope.isCome = true; //要取芭蕉扇
  };

  $scope.setBlur = function(){
   $scope.isFocus = false;//沒(méi)人要來(lái)取芭蕉扇了
  }
 });

 //自定義指令
  app.directive('setFocus',[ function(){
   return {
    scope:false,
    link:function(scope, element){      
     scope.$watch("isFocus",function(newValue,oldValue, scope) {
      //大圣來(lái)了，且要取芭蕉扇
      if(newValue && scope.isCome){
       element[0].focus(); //獲取焦點(diǎn)
       alert("猴哥，老牛不在家，我一介女子還不是你說(shuō)什么我就照做，可你進(jìn)入人家的身體也不打聲招呼，進(jìn)了就進(jìn)了，還搞得我那么難受，求你別搞了，給，芭~~~蕉~~~扇！")
      }
    }, true);;
    }
   };
 }]);

</script>
</body> 
</html>

3. 代碼說(shuō)明

首先說(shuō)明一下，我本后臺(tái)Java工程師，因前端大牛搭了AngularJS后卻辭職去了新浪，一下無(wú)人接手，我便自告奮勇接了活。為了啥？為了漲工資塞！

該文默認(rèn)讀者對(duì)angualrJS有一定的基礎(chǔ)語(yǔ)法，此文的亮點(diǎn)在哪呢？亮點(diǎn)在于實(shí)現(xiàn)獲取焦點(diǎn)的邏輯。angularjs文檔只會(huì)告訴你用自定義指令獲取焦點(diǎn)，如代碼：

<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>

這塊代碼，除了能進(jìn)入頁(yè)面獲取焦點(diǎn)，還能干啥？還能告訴初學(xué)者說(shuō)，親，自定義指令里面還可以直接return 一個(gè)function喲。

正式說(shuō)說(shuō)我是如何實(shí)現(xiàn)執(zhí)行一些操作后實(shí)現(xiàn)獲取焦點(diǎn)的：

首先自定義指令會(huì)用不必說(shuō)了，可親們是否還知道自定義里有一個(gè)屬性叫scope??？在我提供的鏈接的文章有說(shuō)明它有兩個(gè)值類(lèi)型，boolean和對(duì)象，那里面的示例只說(shuō)了值為對(duì)象的例子，但為boolean時(shí)沒(méi)有說(shuō)過(guò)。

既然我們需要在進(jìn)行某個(gè)操作后再獲取焦點(diǎn)，那么就需要我們能同時(shí)操作自定義指令與控制器里的變量，如第一例子里的isCome和isFocus。而在scope說(shuō)明中這樣寫(xiě)到：scope值為false(默認(rèn)值): 使用父作用域作為自己的作用域。為true時(shí): 新建一個(gè)作用域，該作用域繼承父作用域。所以我們默認(rèn)就可以直接在自定義指令里操作控制器里的變量。于是我就又用到了監(jiān)聽(tīng)$watch,這是個(gè)什么鬼？后面會(huì)寫(xiě)個(gè)小文專(zhuān)門(mén)解釋。只要監(jiān)聽(tīng)到變化后的結(jié)果符合獲取焦點(diǎn)的要求，我們就執(zhí)行element[0].focus();來(lái)獲取焦點(diǎn)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

深究AngularJS如何獲取input的焦點(diǎn)（自定義指令）

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽