ngClick 但防止任何活动输入失去焦点

Question

在我的Angular视图中，我有一个输入框和一些可点击的东西使用ng-click。是否有一种Angular方式或简单的vanilla js方式可以防止在点击其中一个ng-click时，输入框失去焦点（如果它处于焦点状态）？

<input type="text" class="form-control" ng-model="foo">

<button ng-click="someThing()">click me</button>

- Sean256

---

在你的 ng-click 方法中调用 $(pattern).focus()，例如在 someThing() 中。 - Pierre Emmanuel Lallemant

为什么你希望它不失去焦点？ - P. Jairaj

Answer 1

不使用 ng-click，因为在该事件触发时，已点击的元素已经将焦点从输入框中移除。

但是，如果在事件处理程序中调用 $event.preventDefault()，ng-mousedown 应该可以工作。以下是使用普通 JS 的示例；在 Angular 中同样适用：

    var preventBlur = function(event) {
      console.log("click");
      event.preventDefault();
    }

    <input type='text' onblur="alert('blurred')">
    <button onmousedown="preventBlur(event)">Click</button>
    

如果您在输入框处于焦点状态时单击按钮，则mousedown事件将被触发，而不会导致输入框失去焦点。

- Daniel Beck

---

它不会丢失文本区域或任何其他位置，比 .focus 更好的解决方案（啊） - Pierre Emmanuel Lallemant

这太完美了，而且转换成Angular ngMousedown非常出色！谢谢你，先生。 - Sean256

Answer 2

最简单的解决方案是使用JavaScript。

$scope.someThing = function () {
    //implementation...
    document.getElementById("yourInputIt").focus();
};

- Alessio

---

实现应该在焦点调用之前，如果元素#yourInputIt依赖于$scope变量，则它将被删除，然后由angular添加一个新的=失去焦点。 - Pierre Emmanuel Lallemant

注意：如果$scope.someThing包含一个带有jQuery的ajax调用，并且代码中有$scope.$apply，则必须将.focus()调用放置在$scope.$apply结束处，因为$apply是异步的。 - Pierre Emmanuel Lallemant