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.

  • ¿Cómo get el text seleccionado en textarea usando jQuery en Internet Explorer 7?
  • ¿Cómo auto-dimensionar un área de texto usando prototipo?
  • Redimensionar automáticamente el área de text en function del contenido
  • ¿Puede la comunidad encontrar áreas de text por class?
  • Twitter bootstrap: concéntrese en textarea dentro de un modal onclick
  • Muestra la línea actual y el número de columna para un área de text
  • Cómo cambiar el número de filas en el área de text usando jQuery
  • Obtener text textarea con javascript o Jquery
  • ¿Cómo establecer el valor de scrollTop para un área de text?
  • Chrome count los caracteres incorrectos en textarea con el atributo maxlength
  • Navegador basado en IDE - Textarea con finalización de código disponible?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.