IE 11의 텍스트 영역 선택이 마지막 행에서 제대로 작동하지 않습니다.

Question

MarkUnit을 작성하기위한 텍스트 영역과 텍스트 영역에 형식을 삽입하는 버튼으로 구성된 Angular 지시문을 작성했습니다. 클릭하면 텍스트가 현재 선택되어 있지 않은 경우, 버튼 (예를 들어, 굵게)는 다음을 추가한다 :

**replace text**

이 텍스트 교체가

을 선택 어디에.

모든 시나리오에서 예상대로 작동합니다. IE 11에서는 최종 행에서 선택이 발생하지만 첫 번째 행에서는 발생하지 않습니다. 다른 모든 브라우저에서 예상대로 작동하며 IE 11에서이 조건을 제외하고 정상적으로 작동합니다.

var editor = element.find('textarea')[0]; 

function createWrappingMarkdown(symbol) { 

    // If text is selected, wrap that text in the provided symbol 
    // After doing so, set the cursor at the end of the highlight, 
    // but before the ending symbol(s) 

    /* This section works fine */ 

    if (editor.selectionStart < editor.selectionEnd) { 
     var start = editor.selectionStart, 
      end = editor.selectionEnd; 

     var value = editor.value.substring(0, start) + symbol + 
      editor.value.substring(start, end) + symbol + 
      editor.value.substring(end, editor.value.length); 

     scope.$evalAsync(function() { 
      editor.value = value; 
      editor.focus(); 
      editor.selectionStart = end + symbol.length; 
      editor.selectionEnd = end + symbol.length; 
     }); 

    // If no text is highlighted, insert {symbol}replace text{symbol} 
    // at the current cursor position. 
    // After inserting, select the text "replace text" 

    /* This is where the selection is broken in IE 11 */ 

    } else if (editor.selectionStart || editor.selectionStart === 0) { 
     var start = editor.selectionStart, 
      message = "replace text"; 

     var value = editor.value.substring(0, start) + symbol + 
      message + symbol + editor.value.substring(start, editor.value.length); 

     scope.$evalAsync(function() { 
      editor.value = value; 
      setCursorSelect(start + symbol.length, start + symbol.length + message.length); 
     }); 
    } 
} 

function setCursorSelect(start, end) { 
    editor.focus(); 
    if (editor.setSelectionRange) { 
     editor.setSelectionRange(start, end); 
    } else { 
     editor.selectionStart = start; 
     editor.selectionEnd = end; 
    } 
} 

업데이트이 문제에 대한 수정 프로그램에 대한

참조 답변 : 여기

선택을 수행하기위한 지침에서 코드입니다. 이 수정 프로그램을 보여주기 위해 Plunk이 개정되었습니다.

Answer 1

IE에서 추가 디버깅을 한 후 커서가 텍스트 영역에서 마지막으로 사용 가능한 위치에있을 때마다 보다 큰 값으로 editor.selectionStart을 설정하고있는 것으로 나타났습니다. 이것은 IE에서만 발생했으며 다른 브라우저에서는 발생하지 않았습니다.

scope.$evalAsync(function() { 
    if (editor.value.length < editor.selectionStart) { 
     start = editor.value.length; 
    } 

    editor.value = value; 
    setCursorSelect(start + symbol.length, start + symbol.length + message.length); 
}); 

쿵하는 소리가 이상이 수정을 반영하기 위해 업데이트되었습니다 선택이 버튼을 누른 다음 필요할 때마다이를 염두에두고, 나는 다음과 같은 해결책을 마련 할 수 있었다.