브라우저의 현재 커서 위치에 텍스트를 삽입하십시오.

Question

텍스트 서식을 지정할 수있는 모달 창이 있습니다. 창에 여러 텍스트 영역이 있습니다. 모달이 특정 텍스트 영역에 연결되어서는 안되기 때문에 모달 창에서 아이콘을 누르면 커서가있는 곳의 문자열/이모티콘 등을 삽입해야합니다. 내 질문, 어떤 요소 (textarea/input/whatever) 커서가 현재 있음을 알 수 있습니까?

Answer 1

모든 브라우저의 최신 버전은 document.activeElement를 지원합니다. 커서가있는 곳에서 현재 어떤 필드에 포커스가 있는지 알려줍니다. 그런 다음 현재 커서 위치에 텍스트를 삽입하는 방법을 알아야합니다. 다음 함수는이를 수행합니다.

// Author: http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript 
// Modified so it's safe across browser windows 
function insertAtCursor(myField, myValue) { 
    var doc = myField.ownerDocument; 
    //IE support 
    if (doc.selection) { 
    myField.focus(); 
    sel = doc.selection.createRange(); 
    sel.text = myValue; 
    } 
    //FF, hopefully others 
    else if (myField.selectionStart || myField.selectionStart == '0') { 
    var startPos = myField.selectionStart; 
    var endPos = myField.selectionEnd; 
    myField.value = myField.value.substring(0, startPos) + 
        myValue + myField.value.substring(endPos, myField.value.length); 
    } 
    // fallback to appending it to the field 
    else { 
    myField.value += myValue; 
    } 
} 

따라서, 당신의 팝업에서, 단추 처리기는 다음과 같은 방법

// Pardon my contrived function name 
function insertTextIntoFocusedTextFieldInOpener(text) { 
    var field = window.opener.document.activeElement; 
    if (field.tagName == "TEXTAREA" || (field.tagName == "INPUT" && field.type == "text") { 
    insertAtCursor(field, text); 
    } 
} 

에게 전화해야

Answer 2

isfocused과 같이 특정 텍스트 필드에 포커스가 있는지 여부를 확인할 수있는 속성이없는 것 같습니다. 그러나 각 텍스트 상자의 onFocus 이벤트에 대한 이벤트 처리기를 만들 수 있으며 나중에 확인할 수 있도록 새로 포커스가 설정된 텍스트 상자의 ID를 변수에 기록하도록 할 수 있습니다.

this tutorial 또한 주어진 필드의 현재 커서 위치에 텍스트를 삽입하는 방법을 알려주는 this tutorial에 관심이있을 수 있습니다 (위의 방법을 사용하여 어떤 필드가 포커스되어 있는지 결정한 경우).