Insertar texto después de la posición del cursor en el área de texto

La siguiente secuencia de comandos inserta el texto al final del área de texto. Necesito cambiar para insertar texto después de la posición actual del cursor en el área de texto.

jQuery(document).ready(function($){ $('#addCommentImage').click(function(){ var imageLoc = prompt('Enter the Image URL:'); if ( imageLoc ) { $('#comment').val($('#comment').val() + '[img]' + imageLoc + '[/img]'); } return false; }); }); 

3 Solutions collect form web for “Insertar texto después de la posición del cursor en el área de texto”

Usted puede verificar esta respuesta . El plugin jquery insertAtCaret parece muy bueno.

Si lo anterior no funciona (en mi caso no funcionó, tal vez mi configuración sea un poco diferente), aquí hay otra solución:

Puedes usar esta función de extensión para obtener la posición:

 (function ($, undefined) { $.fn.getCursorPosition = function () { var el = $(this).get(0); var pos = 0; if ('selectionStart' in el) { pos = el.selectionStart; } else if ('selection' in document) { el.focus(); var Sel = document.selection.createRange(); var SelLength = document.selection.createRange().text.length; Sel.moveStart('character', -el.value.length); pos = Sel.text.length - SelLength; } return pos; } })(jQuery); 

el uso es: var position = $("#selector").getCursorPosition()

para insertar texto en la posición:

 var content = $('#selector').val(); var newContent = content.substr(0, position) + "text to insert" + content.substr(position); $('#selector').val(newContent); 

Eso es todo.

He modificado varias versiones de estas para crear una versión que coloque el primer texto antes de lo que haya seleccionado y el segundo texto después de lo que haya seleccionado y mantenga lo que está seleccionado aún seleccionado. Esto funciona en Chrome y FF, aunque no en IE.

 jQuery.fn.extend({ insertAtCaret: function(myValue, myValueE){ return this.each(function(i) { if (document.selection) { //For browsers like Internet Explorer this.focus(); sel = document.selection.createRange(); sel.text = myValue + myValueE; this.focus(); } else if (this.selectionStart || this.selectionStart == '0') { //For browsers like Firefox and Webkit based var startPos = this.selectionStart; var endPos = this.selectionEnd; var scrollTop = this.scrollTop; this.value = this.value.substring(0, startPos)+myValue+this.value.substring(startPos,endPos)+myValueE+this.value.substring(endPos,this.value.length); this.focus(); this.selectionStart = startPos + myValue.length; this.selectionEnd = ((startPos + myValue.length) + this.value.substring(startPos,endPos).length); this.scrollTop = scrollTop; } else { this.value += myValue; this.focus(); } }) } }); 

Uso: $('#box').insertAtCaret("[Before selection]", "[after]"); También: no reclamar esto como mío de ninguna manera.

  • insert en el cursor en reactjsr
  • Resalte text mientras escribe en textarea
  • El área de text HTML ignora el primer carácter de la nueva línea, ¿por qué?
  • encontrar "saltos de línea" en textarea que es text ARABIC envolvente
  • El valor de HTML textarea está subiendo como 'indefinido'
  • Borrar el valor de TEXTAREA después de hacer clic (enFocus)
  • jQuery.text () no funciona con elementos textarea
  • ¿Contar el número de líneas visualizadas (no líneas nuevas) en un área de text HTML sin jQuery?
  • cómo get el text de textarea usando jQuery con el carácter de línea nueva conservado?
  • ¿Cómo saber qué líneas / caracteres están actualmente visibles en un área de text?
  • Permitir que un tamaño de área textarea encoja (no solo crezca) elemento desde su tamaño original / pnetworkingeterminado
  • Desplácese hasta la parte superior de jQuery-Textarea
  • Cómo resaltar una parte del text en textarea
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.