У меня есть страница с большим количеством текстовых полей. Когда кто-то нажимает на ссылку, я хочу, чтобы слово или два были вставлены туда, где находится курсор, или добавлены к текстовому полю с фокусом.

Например, если курсор / фокус находится на текстовом поле с надписью «яблоко», и он щелкает ссылку с надписью «[электронная почта]», то я хочу, чтобы в текстовом поле было написано «яблоко bob@example.com».

Как я могу это сделать? Возможно ли это вообще, так как что, если фокус находится на элементе radio / dropdown / non textbox? Можно ли запомнить последнее сосредоточенное на текстовом поле?

Использовать этот От говорится, что :

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>

Может быть, более короткая версия, было бы легче понять?

    jQuery("#btn").on('click', function() {
        var $txt = jQuery("#txt");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = "stuff";
        $txt.val(textAreaTxt.substring(0, caretPos)   txtToAdd   textAreaTxt.substring(caretPos) );
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />

Я написал это в ответ на Как добавить текст в текстовое поле с текущей позиции указателя с помощью jquery?

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

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

Код выше не работал для меня в IE. Вот некоторый код, основанный на . Он включает интерфейс на основе Java, который определяет URL-адреса и упрощает доступ к ним. Глядя на вывод

В этом случае 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);
};

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

Process { *} Найти текущую позицию курсора

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

Методы должны соответствовать

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

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

Предыдущее решение (props to gclaghorn) использует 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')" />

Добавление текста в текущей позиции курсора

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

  1. Обновление текущей позиции курсора
  2. https://codepen.io/anon/pen/qZXmgN

Но когда мы говорим о адаптивных экранах и если по какой-то причине мы хотим обрабатывать их с помощью jQuery, Протестировано в Chrome 48, Firefox 45, IE 11 и Edge 25

JS:

HTML:

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

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

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

(firefox), когда я был в Internet Explorer. делать. Я только что сделал это изменение:

В результате получается следующий код:

if ($.browser.msie) 

вместо:

if (br == "ie") { 

Этот плагин jQuery

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

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

проверьте этот стекопоток — у него есть решение для вас:

Как узнать, какой элемент DOM имеет фокус? Редактируемый контент, HTML или любой другой выбор элементов DOM

Если вы пытаетесь вставить курсор в

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

Rangy : Сохранить позицию или выделение

minimist

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

Это делает работу с Paret и выделение текста на одном дыхании!

JavaScript — эффективно заменить все акцентированные символы в строке? — Переполнение стека