重点关注模糊事件角度的文本框

时间:2016-10-28 01:15:04

标签: html angularjs cordova ionic-framework

查看:

   <label class="item item-input">
       <input type="text" ng-model="scan.text" placeholder="Scan here" ng-enter="scanBarcode2(scan)" ng-focus="hideKey()">
       <span>{{scantext.text}}</span>
   </label>

控制器

.controller('RollCallScan2Ctrl', function($scope,$stateParams, Api, $cordovaBarcodeScanner,$filter,$ionicPopup) {

    var a=[], b={};
    $scope.empdata = a;    

    $scope.scan = {text: ""};   


})

我希望将焦点设置在文本框上,加载视图时以及每当焦点关闭或用户触摸屏幕中的任何位置时。我需要重点关注文本框。

1 个答案:

答案 0 :(得分:0)

您可以在Angular中使用'ng-blur'指令来完成此操作。我创建了一个带有setTimeout的示例plnkr,以便在焦点出现时查看返回文本框的焦点

http://plnkr.co/edit/JNfYmL0Bk7pcJXQdQWWN?p=preview

JS:

angular.module("focusApp", [])
.controller("focusController", function($scope) {
  document.getElementById('sampleText').focus();
  $scope.focusTextBox = function() {
    setTimeout(function() {
      document.getElementById('sampleText').focus();
    }, 100);
  };
});

HTML:

<html ng-app="focusApp">

  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="focusController">
    <input type="text" id="sampleText" placeholder="Focussed text box" ng-blur="focusTextBox()"><br /><br />
    <input type="text" placeholder="Text box to test Focus">
  </body>

</html>