Microsoft Edge의 SelectionStart 속성 문제

Question

나는 텍스트 영역에 커서 위치에 지정된 텍스트를 삽입하는 텍스트 영역에 angularJS 텍스트 삽입기를 구현합니다. 인터넷 검색을 조금 해본 결과이 예가 온라인에서 발견되었습니다.

지침의 본체는 여기에 동작하는 예제가 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)