將光標置於文本框中Angularjs addmode

在此site當單擊「添加新」時，我想將光標放入第一個文本框（，酒店名稱）。根據該「新增」按鈕CSHTML代碼將光標置於文本框中Angularjs addmode

<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(); 

    };

對焦（）和select（）不工作，所以我就拿出來。我將不勝感激任何建議。

來源

2016-12-09 leesider

添加了一個應該工作的指令;在我的文章後編輯後檢查plunk – Fissio

超時是正確的答案。我把下面的代碼在 toggleAdd函數的末尾：

setTimeout(function() { 

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

     }, 1000);

我不認爲它會工作，但它沒有。奇怪的是，添加文本到文本框不需要超時工作，但將焦點放在那裏。感謝所有回覆的人。

來源

2016-12-09 14:52:44 leesider

有自動對焦屬性把它所需的輸入

<input autofocus />

另一種方法是嘗試設置角超時，因爲可能的元素不renedred然而，當你把注意力它

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

你可以給它100ms，例如$timeout(function(){}, 100)如果以上沒有幫助

來源

2016-12-09 11:33:49 kidwon

試過了，沒有工作。但是，感謝您的建議。 – leesider

@leesider你確定，因爲我已經在你的示例網站上嘗試過'>並且它工作了 – kidwon

試過這個，在chrome上工作，但不是firefox – Fissio

我做了一個應該工作的指令：

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-隱藏代替父元素，請嘗試以下代碼：

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

新的plunk： https://plnkr.co/edit/PVT8jluVn95T6Yq18nRE?p=preview

來源

2016-12-09 12:23:57 Fissio

將光標置於文本框中Angularjs addmode

回答

相關問題