Вставка текста, в котором курсор использует Javascript/jquery

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

Например, если курсор/фокус находится в текстовом поле с надписью "apple", и он нажимает ссылку "[email]", тогда я хочу, чтобы текстовое поле говорило "apple [email protected]".

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

Ответ 1

Используйте это, here:

	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>

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

Код выше не работал у меня в IE. Здесь некоторый код, основанный на Вставить текст в textarea с jQuery

Я вынул 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();
    }
}

Ответ 5

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

Процесс

Найти текущее положение курсора
Получить текст для копирования
Установите текст там
Обновить положение курсора

Здесь у меня есть 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>

Ответ 6

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

Ответ 7

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

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

Демо: 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>

Ответ 8

используя @quick_sliv ответ:

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

Ответ 9

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

Ответ 10

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

Я только что сделал это изменение:

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

Ответ 11

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

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

Ответ 12

Контент, редактируемый, 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

Это делает работу с кареткой pos и текстовым выбором легким!