Question

单击“添加新项”时，在此site上，我希望将光标放在第一个文本框中（酒店名称）。 “添加新”按钮下的cshtml代码是

 <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>

toogleAdd（）函数如下：

     $scope.toggleAdd = function () {


        $("#txtHotelName").focus();
        $('#txtHotelName').select();


        $scope.action = "Create";
        $scope.addMode = !$scope.addMode;
        $("#txtHotelName").focus();

    };

focus（）和select（）不起作用所以我把它们拿出来了。我很感激任何建议。

Answer 1

超时是正确的答案。我把以下代码放在了最后 toggleAdd函数：

setTimeout(function () {

            $("#txtHotelName").focus();

        }, 1000);

我认为它不会起作用，但确实如此。奇怪的是，在文本框中添加文本并不需要超时工作，但将焦点放在那里。感谢所有回复的人。

Answer 2

自动对焦的属性将其置于所需的输入

<input autofocus />

替代方法是尝试设置角度超时，因为当您尝试聚焦它时，该元素可能尚未重新编辑

$timeout(function(){
  $("#txtHotelName").focus();
});

如果上面没有帮助，你可以给它100ms实例$timeout(function(){}, 100)

Answer 3

我做了一个应该有效的指令：

angular.module('example', [])
.directive('focusOnShow', function($timeout) {
  return {
    link: function(scope, elem, attrs) {

      function focusElem() {
        $timeout(function() { elem[0].focus() }, 0)
      }
      console.log(angular.element(elem))
      scope.$watch(attrs.ngShow, function(newVal, oldVal) {
        if (newVal) { focusElem() }
      })

      scope.$watch(attrs.ngHide, function(newVal) {
        if (!newVal) { focusElem() }
      })
    }
  }
})

并在你的html中（将指令添加到你想要关注的输入）：

<input type="text" focus-on-show>

在这里插入： https://plnkr.co/edit/oO117vQhszC6gfFSHV1Y?p=preview

编辑：注意到你在父元素上有ng-hide，然后尝试这个：

scope.$watch(function() { return elem.parent().hasClass('ng-hide') }, function(newVal, oldVal) {
  newVal && focusElem()
})

新插件： https://plnkr.co/edit/PVT8jluVn95T6Yq18nRE?p=preview

将光标放在文本框Angularjs addmode中

3 个答案: