如何在角度设置使用名称,模型或ID聚焦的输入字段?

时间:2016-05-27 15:00:55

标签: javascript angularjs

我有一个表单并希望当光标离开第一个字段(模糊)时,它会检查数据是否是单词" test"。如果数据不包含,则会返回广告制作字段1再次集中。

<form name='yourForm' novalidate ng-submit="save(yourForm)">

        <label>Field 1</label>
        <input type="email" name="first" ng-model="fname" ng-blur="displayData(fname)">
        <br><br>

        <label>Field 2</label>
        <input type="text" name="last" ng-model="lname" ng-blur="displayData(lname)">

        <button type="button">finish</button>
</form>

所以我找不到如何使用字段名称,id或ng-model设置字段焦点的解决方案。

我想做一些像这样的事情,但是有点角色:

var inp = document.getElementsByTagName('INPUT')[1];
inp.focus();

但不知道如何获取输入索引或获取输入名称。

2 个答案:

答案 0 :(得分:1)

您需要在$ scope中定义函数displayData(),并获取可以使用的元素值document.getElementByName('name')[0] .value

参见工作演示:http://jsbin.com/xeyozocoyi/1/edit?html,js,output

var app = angular.module('Demo', []);
app.controller('TestCtrl', function ($scope) {

$scope.displayData = function(){

   var inp = document.getElementsByName('first')[0];

    if(inp.value != "test"){
       alert("Will focus because value is" + inp.value);
      inp.focus();
      return false;
    }
    return true;
  };

});

和您的观点

<div ng-controller="TestCtrl" >   
    <form name='yourForm' novalidate ng-submit="save(yourForm)">

        <label>Field 1</label>
        <input type="email" name="first" ng-model="fname"   ng-blur="displayData()">
        <br><br>

        <label>Field 2</label>
        <input type="text"   name="last" ng-model="lname"  ng-blur="displayData()">

        <button type="button">finish</button>
</form>
</div>

答案 1 :(得分:1)

您可以尝试使用这样的指令:

已更新

在属性值中添加了一个字符串,以确定输入应包含的内容作为模糊之前的值

https://jsfiddle.net/0bcsvLk5/

function inputBlur() {
  var directive = {
    restrict: 'EA',
    scope: {
      inputBlur:'@'
    },
    link: link
  };

  return directive;

  function link(scope, element, attr) {
    element.on('blur', function() {
      if (element.val() != scope.inputBlur) {
        element[0].focus();
        e.preventDefault();
      }
    });
  }
}

HTML

<input type="text" ng-model="fname" input-blur="test" class="form-control">
<br>
<input type="text" ng-model="lname" class="form-control">
<br>
<input type="text" ng-model="email" class="form-control">