커서가 Javascript/jquery를 사용하는 텍스트 삽입

커서가 Javascript/jquery를 사용하는 텍스트 삽입

텍스트 상자가 많은 페이지가 있습니다.누군가 링크를 클릭할 때, 저는 커서가 있는 곳에 한두 단어를 삽입하거나 포커스가 있는 텍스트 상자에 추가하기를 원합니다.

예를 들어, 커서/키보드가 'apple'이라고 표시된 텍스트 상자에 있고 그가 '[email]이라고 표시된 링크를 클릭하면 텍스트 상자에 'apple bob@example.com '라고 표시됩니다.

어떻게 해야 하나요?라디오/드롭다운/비텍스트 상자 요소에 초점을 맞춘다면 어떻게 될까요?텍스트 상자에 마지막으로 초점을 맞춘 내용을 기억할 수 있습니까?

여기서 사용:

function insertAtCaret(areaId, text) {
  var txtarea = document.getElementById(areaId);
  if (!txtarea) {
    return;
  }

  var scrollPos = txtarea.scrollTop;
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));
  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } else if (br == "ff") {
    strPos = txtarea.selectionStart;
  }

  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;
  strPos = strPos + text.length;
  if (br == "ie") {
    txtarea.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character', -txtarea.value.length);
    ieRange.moveStart('character', strPos);
    ieRange.moveEnd('character', 0);
    ieRange.select();
  } else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }

  txtarea.scrollTop = scrollPos;
}

<textarea id="textareaid"></textarea>
<a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;">Click Here to Insert</a>

좀 더 짧은 버전이 이해하기 쉬울까요?

$('#btn').click(function() {
    const element = $('#txt');
    const caretPos = element[0].selectionStart;
    const textAreaTxt = element.val();
    const txtToAdd = "stuff";

    element.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
});

<script src="https://code.jquery.com/jquery-3.6.3.min.js" crossorigin="anonymous"></script>
<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />

저는 jquery로 포인터의 현재 위치에서 텍스트 상자에 텍스트를 추가하는 방법에 대한 응답으로 이것을 썼습니다.

George Claghorn의 승인된 답변은 커서 위치에 텍스트를 삽입하는 데 효과적이었습니다.그러나 사용자가 텍스트를 선택한 경우 해당 텍스트를 대체하려면(대부분의 텍스트에 대한 기본 경험) '뒤로' 변수를 설정할 때 약간의 변경이 필요합니다.

또한 이전 버전의 IE를 지원할 필요가 없는 경우 최신 버전은 텍스트 영역을 지원합니다.selectionStart. 브라우저 감지 및 IE별 코드를 모두 제거할 수 있습니다.

최소한 Chrome 및 IE11에서 작동하고 선택한 텍스트를 대체하는 단순화된 버전이 있습니다.

function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
    txtarea.value = front + text + back;
    caretPos = caretPos + text.length;
    txtarea.selectionStart = caretPos;
    txtarea.selectionEnd = caretPos;
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

위의 코드는 IE에서 제게 적용되지 않았습니다.여기 이 대답을 기반으로 한 코드가 있습니다.

나는 그것을 꺼냈습니다.getElementById다른 방법으로 원소를 참조할 수 있었습니다.

function insertAtCaret(element, text) {
  if (document.selection) {
    element.focus();
    var sel = document.selection.createRange();
    sel.text = text;
    element.focus();
  } else if (element.selectionStart || element.selectionStart === 0) {
    var startPos = element.selectionStart;
    var endPos = element.selectionEnd;
    var scrollTop = element.scrollTop;
    element.value = element.value.substring(0, startPos) +
      text + element.value.substring(endPos, element.value.length);
    element.focus();
    element.selectionStart = startPos + text.length;
    element.selectionEnd = startPos + text.length;
    element.scrollTop = scrollTop;
  } else {
    element.value += text;
    element.focus();
  }
}

input{width:100px}
label{display:block;margin:10px 0}

<label for="in2copy">Copy text from: <input id="in2copy" type="text" value="x"></label>
<label for="in2ins">Element to insert: <input id="in2ins" type="text" value="1,2,3" autofocus></label>
<button onclick="insertAtCaret(document.getElementById('in2ins'),document.getElementById('in2copy').value)">Insert</button>

편집: 실행 중인 스니펫이 추가되었습니다. jQuery가 사용되고 있지 않습니다.

@quick_sliv 응답 사용:

function insertAtCaret(el, text) {
    var caretPos = el.selectionStart;
    var textAreaTxt = el.value;
    el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
};

JQuery 및 JavaScript를 통해 텍스트 상자의 현재 커서 위치에 일부 텍스트를 삽입하는 방법

과정

1. 현재 커서 위치 찾기
2. 복사할 텍스트 가져오기
3. 저쪽에 텍스트 설정
4. 커서 위치 업데이트

텍스트 상자 2개와 단추 1개가 있습니다.텍스트 상자의 특정 위치를 클릭한 다음 버튼을 클릭하여 다른 텍스트 상자의 텍스트를 이전 텍스트 상자의 위치에 붙여넣어야 합니다.

여기서 주요 문제는 텍스트를 붙여넣을 현재 커서 위치를 얻는 것입니다.

//Textbox on which to be pasted
<input type="text" id="txtOnWhichToBePasted" />

//Textbox from where to be pasted
<input type="text" id="txtFromWhichToBePasted" />


//Button on which click the text to be pasted
<input type="button" id="btnInsert" value="Insert"/>


<script type="text/javascript">

$(document).ready(function () {
    $('#btnInsert').bind('click', function () {
            var TextToBePasted = $('#txtFromWhichToBePasted').value;
            var ControlOnWhichToBePasted = $('#txtOnWhichToBePasted');

            //Paste the Text
            PasteTag(ControlOnWhichToBePasted, TextToBePasted);
        });
    });

//Function Pasting The Text
function PasteTag(ControlOnWhichToBePasted,TextToBePasted) {
    //Get the position where to be paste

    var CaretPos = 0;
    // IE Support
    if (document.selection) {

        ControlOnWhichToBePasted.focus();
        var Sel = document.selection.createRange();

        Sel.moveStart('character', -ctrl.value.length);

        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ControlOnWhichToBePasted.selectionStart || ControlOnWhichToBePasted.selectionStart == '0')
        CaretPos = ControlOnWhichToBePasted.selectionStart;

    //paste the text
    var WholeString = ControlOnWhichToBePasted.value;
    var txt1 = WholeString.substring(0, CaretPos);
    var txt2 = WholeString.substring(CaretPos, WholeString.length);
    WholeString = txt1 + TextToBePasted + txt2;
    var CaretPos = txt1.length + TextToBePasted.length;
    ControlOnWhichToBePasted.value = WholeString;

    //update The cursor position 
    setCaretPosition(ControlOnWhichToBePasted, CaretPos);
}

function setCaretPosition(ControlOnWhichToBePasted, pos) {

    if (ControlOnWhichToBePasted.setSelectionRange) {
        ControlOnWhichToBePasted.focus();
        ControlOnWhichToBePasted.setSelectionRange(pos, pos);
    }
    else if (ControlOnWhichToBePasted.createTextRange) {
        var range = ControlOnWhichToBePasted.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

</script>

현재 커서 위치에 텍스트를 추가하려면 다음 두 단계를 수행합니다.

1. 현재 커서 위치에 텍스트 추가
2. 현재 커서 위치 업데이트

데모: https://codepen.io/anon/pen/qZXmgN

Chrome 48, Firefox 45, IE 11 및 Edge 25에서 테스트됨

JS:

function addTextAtCaret(textAreaId, text) {
    var textArea = document.getElementById(textAreaId);
    var cursorPosition = textArea.selectionStart;
    addTextAtCursorPosition(textArea, cursorPosition, text);
    updateCursorPosition(cursorPosition, text, textArea);
}
function addTextAtCursorPosition(textArea, cursorPosition, text) {
    var front = (textArea.value).substring(0, cursorPosition);
    var back = (textArea.value).substring(cursorPosition, textArea.value.length);
    textArea.value = front + text + back;
}
function updateCursorPosition(cursorPosition, text, textArea) {
    cursorPosition = cursorPosition + text.length;
    textArea.selectionStart = cursorPosition;
    textArea.selectionEnd = cursorPosition;
    textArea.focus();    
}

HTML:

<div>
    <button type="button" onclick="addTextAtCaret('textArea','Apple')">Insert Apple!</button>
    <button type="button" onclick="addTextAtCaret('textArea','Mango')">Insert Mango!</button>
    <button type="button" onclick="addTextAtCaret('textArea','Orange')">Insert Orange!</button>
</div>
<textarea id="textArea" rows="20" cols="50"></textarea>

마지막으로 초점을 맞춘 텍스트 상자를 추적하기 위해 다음 자바스크립트를 사용할 수 있다고 생각합니다.

<script>
var holdFocus;

function updateFocus(x)
{
    holdFocus = x;
}

function appendTextToLastFocus(text)
{
    holdFocus.value += text;
}
</script>

용도:

<input type="textbox" onfocus="updateFocus(this)" />
<a href="#" onclick="appendTextToLastFocus('textToAppend')" />

이전 솔루션(gclaghorn에 대한 제안)은 텍스트 영역을 사용하고 커서의 위치도 계산하므로 원하는 것에 더 적합할 수 있습니다.반면에, 만약 당신이 그것을 찾고 있다면, 이것은 더 가벼울 것입니다.

이 질문의 답은 아주 오래 전에 게시되었고 구글 검색을 통해 우연히 발견했습니다.HTML5는 setRangeText() 메서드를 포함하는 HTMLInputElement API를 제공합니다. setRangeText() 메서드는 텍스트 범위를 대체합니다.<input>또는<textarea>새 문자열이 있는 요소:

element.setRangeText('abc');

위의 내용은 내부에서 선택한 내용을 대체합니다.element와 함께abc입력 값의 어느 부분을 바꿀 것인지 지정할 수도 있습니다.

element.setRangeText('abc', 3, 5);

위의 내용은 입력 값의 4번째 ~ 6번째 문자를 대체합니다.abc또한 다음 문자열 중 하나를 4번째 매개 변수로 제공하여 텍스트가 교체된 후 선택 영역을 설정하는 방법을 지정할 수 있습니다.

• 'preserve'선택 항목을 보존하려는 시도입니다.기본값입니다.
• 'select'새로 삽입한 텍스트를 선택합니다.
• 'start'선택 영역을 삽입된 텍스트 바로 앞으로 이동합니다.
• 'end'선택 영역을 삽입된 텍스트 바로 뒤로 이동합니다.

브라우저 호환성

setRangeText에 대한 MDN 페이지는 브라우저 호환성 데이터를 제공하지 않지만 HTMLInputElement와 동일할 것 같습니다.setSelectionRange()는 기본적으로 모든 최신 브라우저, IE 9 이상, Edge 12 이상입니다.

Internet Explorer 9에서 수락된 답변이 작동하지 않았습니다.확인해보니 브라우저 감지가 제대로 되지 않아요, 인터넷 익스플로러에 있을 때 ff(불여우)를 감지했습니다.

방금 변경했습니다.

if ($.browser.msie) 

다음 대신:

if (br == "ie") { 

결과 코드는 다음과 같습니다.

function insertAtCaret(areaId,text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );

    if ($.browser.msie) { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);  
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}

이 jQuery 플러그인은 미리 만들어진 선택/카트 조작 방법을 제공합니다.

필요한 텍스트 상자에만 초점을 맞추고 텍스트를 삽입할 수 있습니다.초점이 어디에 있는지 알 수 있는 방법이 없습니다. (아마 모든 DOM 노드에 걸쳐 상호 작용할 것인가?).

이 스택 오버플로를 확인합니다. 사용자를 위한 솔루션이 있습니다.어떤 DOM 요소에 포커스가 있는지 어떻게 알 수 있습니까?

내용 편집 가능, HTML 또는 기타 DOM 요소 선택

경우는에 .<div contenteditable="true">특히 편집 가능한 컨테이너 내에 하위 항목이 있는 경우 이 작업이 훨씬 더 어려워집니다.

저는 Rangy 라이브러리를 사용할 때 정말 큰 행운을 얻었습니다.

• GIT: https://github.com/timdown/rangy
• NPM: https://www.npmjs.com/package/rangy

다음과 같은 수많은 뛰어난 기능을 갖추고 있습니다.

• 위치 또는 선택 저장
• 그런 다음 나중에 위치 또는 선택 항목 복원
• 선택 항목 HTML 또는 일반 텍스트 가져오기
• 그 중에서도

제가 마지막으로 확인한 온라인 데모는 작동하지 않았지만, repo에는 작동하는 데모가 있습니다.시작하려면 Git 또는 NPM에서 Repo를 다운로드한 다음 ./range/demos/index.html을 엽니다.

캐럿 위치 및 텍스트 선택 작업을 간편하게 수행할 수 있습니다!

언급URL : https://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery