ejemplo - Insertar un texto donde el cursor está usando Javascript/jquery

onmouseout

Question

Tengo una página con muchos cuadros de texto. Cuando alguien hace clic en un enlace, quiero que una palabra o dos se inserten donde está el cursor, o se anexa al cuadro de texto que tiene el foco.

Por ejemplo, si el cursor / foco está en un cuadro de texto que dice ''manzana'' y hace clic en un enlace que dice ''[correo electrónico]'', entonces quiero que el cuadro de texto diga ''apple [email protected]''.

¿Cómo puedo hacer esto? ¿Esto es posible, ya que si el foco está en un elemento de radio / desplegable / no de cuadro de texto? ¿Se puede recordar el último centrado en el cuadro de texto?

Answer 1

Agregar texto a la posición actual del cursor implica dos pasos:

1. Agregar el texto en la posición actual del cursor
2. Actualizando la posición actual del cursor

Demostración: https://codepen.io/anon/pen/qZXmgN

Probado en Chrome 48, Firefox 45, IE 11 y 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>

Answer 2

Cómo insertar texto en la posición actual del cursor de un TextBox a través de JQuery y JavaScript

Proceso

1. Encuentre la posición actual del cursor
2. Obtener el texto que se va a copiar
3. Establecer el texto allí
4. Actualiza la posición del cursor

Aquí tengo 2 TextBoxes y un botón. Tengo que hacer clic en una posición determinada en un cuadro de texto y luego hacer clic en el botón para pegar el texto del otro cuadro de texto en la posición del cuadro de texto anterior.

El problema principal aquí es obtener la posición actual del cursor donde pegaremos el texto.

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

Answer 3

Creo que podrías usar el siguiente JavaScript para rastrear el último cuadro de texto enfocado:

<script>
var holdFocus;

function updateFocus(x)
{
    holdFocus = x;
}

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

Uso:

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

Una solución anterior (utilería para gclaghorn) utiliza textarea y también calcula la posición del cursor, por lo que puede ser mejor para lo que desee. Por otro lado, este sería más ligero, si eso es lo que estás buscando.

Answer 4

El código anterior no funcionó para mí en IE. Aquí hay un código basado en Insertar texto en textarea con jQuery

Saqué getElementById para poder hacer referencia al elemento de otra manera.

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

Answer 5

La respuesta aceptada no funcionó en Internet Explorer 9. La revisé y la detección del navegador no funcionaba correctamente, detectó ff (firefox) cuando estaba en Internet Explorer.

Acabo de hacer este cambio:

if ($.browser.msie) 

En lugar de:

if (br == "ie") { 

El código resultante es este:

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

Answer 6

La respuesta aprobada de George Claghorn fue excelente para simplemente insertar texto en la posición del cursor. Sin embargo, si el usuario ha seleccionado el texto y desea que ese texto sea reemplazado (la experiencia predeterminada con la mayoría del texto), debe realizar un pequeño cambio al configurar la variable ''atrás''.

Además, si no necesita admitir versiones anteriores de IE, las versiones modernas admiten textarea.selectionStart, de modo que puede eliminar toda la detección del navegador y el código específico de IE.

Aquí hay una versión simplificada que funciona para Chrome e IE11 al menos, y se encarga de reemplazar el texto seleccionado.

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

Answer 7

Tal vez una versión más corta, sería más fácil de entender?

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

Escribí esto en respuesta a ¿Cómo agregar un texto a un cuadro de texto desde la posición actual del puntero con jquery?

Answer 8

Use esto, desde 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>

Answer 9

solo puede enfocar el cuadro de texto requerido e insertar el texto allí. no hay forma de averiguar dónde se enfoca AFAIK (¿quizás interar en todos los nodos DOM?).

revisa este - tiene una solución para ti: ¿cómo puedo saber qué elemento DOM tiene el foco?

Answer 10

usando @quick_sliv respuesta:

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

Answer 11

Este plugin de jQuery le proporciona una forma preestablecida de manipulación de selección / intercalación.

Answer 12

Contenido Editable, HTML o cualquier otro elemento DOM Selecciones

Si intenta insertar en caret en un <div contenteditable="true"> , esto se vuelve mucho más difícil, especialmente si hay niños dentro del contenedor editable.

Tuve mucha suerte con la biblioteca Rangy :

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

Tiene un montón de excelentes características tales como:

• Guardar posición o selección
• Luego, más tarde, restaura la posición o selección
• Obtener selección HTML o texto plano
• Entre muchos otros

La demo en línea no funcionaba la última vez que lo verifiqué, sin embargo, el repositorio tiene demos de trabajo. Para comenzar, simplemente descargue el Repo de Git o NPM, luego abra ./rangy/demos/index.html

¡Hace que trabajar con la opción de posteo y selección de texto sea muy fácil!