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 中它忽略光标的位置并将选择开始和结束属性设置回 0。

我调查了这个问题，发现如果我将 div "add" 更改为按钮，它将在 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)

Microsoft Edge 上的 SelectionStart 属性问题

Issue with SelectionStart property on Microsoft Edge

javascript

css

angularjs

microsoft-edge

Microsoft Edge 上的 SelectionStart 属性 问题

Issue with SelectionStart property on Microsoft Edge

javascript

css

angularjs

microsoft-edge

Microsoft Edge 上的 SelectionStart 属性问题