JavaScript 的 .select() 方法仅在第二次尝试时触发

Question

使用 Angular，我正在尝试实现一种通过单击 'Edit' 按钮来更改值的方法，这样当单击此按钮时，将在文本，当单击 'Save' 按钮时，输入的不透明度变为 0，并应用模型的值。

我创建了一个 jsfiddle 来使我的问题更加直观。 JSFIDDLE DEMO

问题如下：我想 select 文本让用户明白，单击 'Edit' 按钮后现在可以更改它。我是这样做的：

var input = angular.element(document.querySelector('input'))[0];
input.focus();
input.select();

唯一的问题是 input.select() 仅在第二次尝试时有效。你可以在演示中看到它。我对此没有任何合理的解释。我需要指出的是，我正在编写的这个应用程序是为 Electron 编写的，这意味着它只会在 Chromium 中启动，所以我不需要为此提供跨浏览器支持。

第一次点击'Edit'按钮时，没有select离子发生：

但是当我点击 'Save' 然后再次点击 'Edit' 时，一切正常：

如有任何想法，我们将不胜感激！

Answer 1

使用$timeout，会触发摘要循环

var app = angular.module('app', []);

app.controller('mainController', function($timeout,$scope) {
  var vm = this;
  vm.address = '127.0.0.1';
  vm.name = 'anabelbreakfasts';
  vm.editing = {
    address: false
  };
  vm.temp = {
    address: null
  };

  vm.changeClick = function(element) {
    vm.editing[element] = !vm.editing[element];
    if (vm.editing[element]) {
      vm.temp[element] = vm[element];
      var input = angular.element(document.querySelector('div.row.' + element + ' input'))[0];
      $timeout(function(){
        input.focus(); 
        input.select();
      });
    } else {
      vm[element] = vm.temp[element];
    }
  };
});

Fiddle

Answer 2

使用设置超时：

setTimeout(function(){
    input.select();
}, 0)

此外，input.focus()有点多余

JavaScript 的 .select() 方法仅在第二次尝试时触发

JavaScript's .select() method procs only from second attempt

javascript

css

angularjs

chromium