как динамически вставлять текст в textarea из jquery [duplicate]

Как вставить некоторый текст в текущую позицию курсора TextBox через JQuery и JavaScript

Процесс

1. Найти текущую позицию курсора
2. Получить текст, который нужно скопировать
3. Установите текст там
4. Обновить положение курсора

Здесь у меня есть 2 текстовых блока и кнопка. Я должен нажать на определенную позицию в текстовом поле, а затем нажать кнопку, чтобы вставить текст из другого текстового поля в позицию предыдущего текстового поля.

Основная проблема заключается в том, что получение текущего курсора где мы вставим текст.

//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>

вы можете только сфокусировать требуемое текстовое поле и вставить туда текст. нет способа узнать, где фокус AFAIK (возможно, взаимодействие со всеми узлами DOM?).

проверить этот стековый поток - у него есть решение для вас: Как узнать, какой элемент DOM имеет фокус?

Код выше не работал для меня в 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>

EDIT: Добавлен исполняемый фрагмент, jQuery не используется.

Я думаю, вы могли бы использовать следующий JavaScript для отслеживания текстового поля с последним фокусом:

<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) использует textarea и вычисляет положение курсора, так что это может быть лучше для того, что вы хотите. С другой стороны, этот был бы более легким, если это то, что вы ищете.

Содержимое Редактируемый, HTML или любой другой элемент DOM. Выбор

Если вы пытаетесь вставить в карете на <div contenteditable="true">, это становится намного сложнее, особенно если в пределах редактируемого контейнера есть дети.

Мне очень повезло с использованием библиотеки Rangy:

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

У этого есть тонна замечательных функций, таких как:

• Сохранить позицию или выбор
• Затем позже Восстановить позицию или выбор
• Получить выделение HTML или Plaintext
• Среди многих других

Онлайн-демо не работало последнее, что я проверил, однако у репо есть рабочие демонстрации. Чтобы начать работу, просто загрузите Repo из Git или NPM, затем откройте ./rangy/demos/index.html

. Это делает работу с позицией post и текстом легким!

Утвержденный ответ Джорджа Клагхорна отлично подойдет для простого вставки текста в позицию курсора. Если пользователь выделил текст, и вы хотите, чтобы этот текст был заменен (по умолчанию используется большинство текста), вам нужно внести небольшое изменение при установке переменной «назад».

Кроме того, если вам не нужно поддерживать более старые версии IE, современные версии поддерживают textarea.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;
}

Этот плагин jQuery дает вам готовый способ выбора / каттинга.

Принятый ответ не работал для меня в Internet Explorer 9. Я проверил его и обнаружение браузера работало неправильно, оно обнаружило ff (firefox), когда я был в Internet Explorer.

I просто это изменение:

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;
}

с помощью ответа @quick_sliv:

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

Добавление текста в текущую позицию курсора включает в себя два шага:

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>