텍스트 영역을 편집 가능하게 만드는 방법은 무엇입니까?

Question

영어를 힌디어 onkeyup 이벤트로 변환하는 textarea이 있습니다. 그러나 편집을 위해 캐럿을 뒤로 이동하면 입력 한 첫 번째 문자가 힌디어로 변환되고 캐럿이 문자열의 끝으로 이동합니다. textarea 내의 같은 지점에 캐럿을 저장할 수 있으므로 문자열 끝으로 이동하지 않습니다.

Answer 1

이 문제는 캐럿이 이동하는 모든 키 업을 텍스트 영역의 값으로 덮어 쓰는 것입니다.

캐럿의 값을 얻고 전에 텍스트를 바꾸고 바꾼 후에 다시 설정하려고합니다.

Stackoverflow Answer: Get Caret Position - 변경되지 않은

function getCaret(el) { 
    if (el.selectionStart) { 
    return el.selectionStart; 
    } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
     return 0; 
    } 

    var re = el.createTextRange(), 
     rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    return rc.text.length; 
    } 
    return 0; 
} 

Stackoverflow Answer: Set Caret Position 아래 링크 대답에서 코드 - 변경되지 않은

function SetCursorPosition(pos) 
{ 
    // HERE txt is the text field name 
    var obj=document.getElementById('<%= txt.ClientID %><%= txt.ClientID %>'); 

    //FOR IE 
    if(obj.setSelectionRange) 
    { 
     obj.focus(); 
     obj.setSelectionRange(pos,pos); 
    } 

    // For Firefox 
    else if (obj.createTextRange) 
    { 
     var range = obj.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', pos); 
     range.moveStart('character', pos); 
     range.select(); 
    } 
} 

아래 링크 대답에서 코드는 모든 교체를 피함으로써이 문제를 해결받을 수있는 몇 가지 다른 방법이 있습니다 텍스트를 키 업 이벤트에 추가하고 단추 누름, 흐림/unfocus 또는 다른 것으로 이동합니다. 이렇게하면 끝으로 재설정되는 캐럿 위치에 대해 걱정하지 않아도됩니다.

텍스트 변경을 트리거하기 위해 다른 이벤트로 이동하는 경우 나타나는 유일한 단점은 간단하지 않다는 것입니다.