angular.js - angularjs 顯示textarea後如何自動取得焦點

Question

<p ng-repeat="x in inputContent track by $index">
    <p ng-if="x.hint" ng-click="toEdit({{$index}})" class="lc-hint">{{x.placeholder}}</p>
    <textarea ng-if="!x.readable" ng-model="x.value"></textarea>
</p>

由ng-repeat產生了多個這樣的結構，textarea一開始隱藏，點擊lc-hint，使textarea出現，如何自動取得焦點。

官方文件裡的setfocus指令好像不行。求助

Answer 1

你的程式碼有點問題：

ng-click="toEdit({{$index}})"

應該寫成

ng-click="toEdit($index)"

為什麼不用原生的，加入 textarea 的 id 為abc；

document.getElementById("abc").focus();

如果在console中輸入，最好加個延遲。目前頁面為focus狀態，才能觸發textarea的focus。輸入完後立即點擊頁面的任何地方才會觸發：

setTimeout(function(){document.getElementById("abc").focus();},1000);

你遇到的 setfocus 不生效，可能也是 因為目前頁面不是focus狀態。

放到你的程式碼環境裡，將textarea加上id，我給寫的字首為 suibianla_{隨便}：

<textarea id="suibianla_{{ $index }}" ng-if="!x.readable" ng-model="x.value"></textarea>

$scope.toEdit = function(index){
    //你的业务代码
    inputContent[index].readable = true;    //我猜你是这样写的，在这里后边加一句
    document.getElementById("suibianla_" + index).focus();
}