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