Microsoft EdgeのSelectionStartプロパティに関する問題

Question

私は、指定されたテキストをテキスト領域のカーソルの位置に挿入するテキスト領域にangularJSテキストインサータを実装しています。私は少しのグーグルでこの例をオンラインで見つけました。

ディレクティブの本体は、実施例は、これは、それがの位置を無視し、Microsoftのエッジから離れて、すべてのブラウザ上で絶対的に正常に動作している、ここでhttp://plnkr.co/edit/f496Mh?p=preview

見つけることができ、ここで

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

     }); 
    } 
    } 
}]) 

ですカーソルを移動して、selectionStartとEndプロパティを0に戻します。

私は問題を調査して、divに "add"を変更すると、Edgeでは期待どおりに動作しますが、もし可能ならばdivを使うことができる。

私はここに何かを見逃してしまったのですか、これはブラウザのバグですか？

Answer 1

エッジは、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(); 
     } 

     }); 
    } 
    } 
}]) 

非角度バージョンに興味がある人は、次のものを使用します。コードは、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)