javascript - Microsoft Edge 上的 SelectionStart 属性问题

Question

我正在将一个 angularJS 文本插入器实现到一个文本区域，该文本区域将指定的文本插入到文本区域中光标的位置。经过一些谷歌搜索后，我在网上找到了这个示例。

指令的主体在这里

app.directive('myText', ['$rootScope', function($rootScope) {
  return {
    link: function(scope, element, attrs) {
      $rootScope.$on('add', function(e, val) {
        var domElement = element[0];

        if (document.selection) {
          domElement.focus();
          var sel = document.selection.createRange();
          sel.text = val;
          domElement.focus();
        } else if (domElement.selectionStart || domElement.selectionStart === 0) {
          var startPos = domElement.selectionStart;
          var endPos = domElement.selectionEnd;
          var scrollTop = domElement.scrollTop;
          domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
          domElement.focus();
          domElement.selectionStart = startPos + val.length;
          domElement.selectionEnd = startPos + val.length;
          domElement.scrollTop = scrollTop;
        } else {
          domElement.value += val;
          domElement.focus();
        }

      });
    }
  }
}])

可以在这里找到一个工作示例 http://plnkr.co/edit/f496Mh?p=preview

这在除 Microsoft Edge 之外的所有浏览器上都运行良好，在 Microsoft Edge 中它忽略光标的位置并将 selectionStart 和 End 属性设置回 0。

我调查了这个问题，发现如果我将 div“添加”更改为按钮，它将在 Edge 中按预期工作，但如果可能的话我更愿意使用 div。

我是不是遗漏了什么，或者这是浏览器的错误？

Answer 1

Edge 需要在使用selectionStart 或selectionEnd 之前设置focus()。

其他浏览器似乎从正在使用的元素的上下文中获取焦点。我在浏览器中使用 JS 时遇到了这个问题，之前没有使用过 Angular，但这个问题似乎在两者中都很常见。

下面修改后的代码适用于 Plunker。

app.directive('myText', ['$rootScope', function($rootScope) {
  return {
    link: function(scope, element, attrs) {
      $rootScope.$on('add', function(e, val) {
        var domElement = element[0];

        if (document.selection) {
          domElement.focus();
          var sel = document.selection.createRange();
          sel.text = val;
          domElement.focus();
        } else if (domElement.selectionStart || domElement.selectionStart === 0) {
          domElement.focus();
          var startPos = domElement.selectionStart;
          var endPos = domElement.selectionEnd;
          var scrollTop = domElement.scrollTop;
          domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
          domElement.selectionStart = startPos + val.length;
          domElement.selectionEnd = startPos + val.length;
          domElement.scrollTop = scrollTop;
        } else {
          domElement.value += val;
          domElement.focus();
        }

      });
    }
  }
}])

如果有人对非 Angular 版本感兴趣，下面是我使用的。代码由一个按钮调用，其中 textareaElement 可以选择文本:

var el= document.getElementById('textareaElement');
var selectionStart = el.selectionStart;
var selectionEnd = el.selectionEnd ;
//selectionStart and selectionEnd are always 0 in Edge


var el= document.getElementById('textareaElement');
el.focus();
var selectionStart = el.selectionStart;
var selectionEnd = el.selectionEnd;
//selectionStart and selectionEnd are where textareaElement's selected text start and end in Edge (and other browsers)