Inserimento di testo dopo la posizione del cursore nel testo

Question

Lo script seguente inserisce il testo alla fine dell'area di testo. Devo passare a inserire il testo dopo la posizione corrente del cursore nell'area di testo.

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

Answer 1

È possibile effettuare il checkout this answer. Il plugin jQuery insertAtCaret sembra molto carino.

Answer 2

Ho modificato varie versioni di questi per creare una versione che posiziona il primo testo prima di ciò che è stato selezionato e il secondo testo dopo quello che è stato selezionato e mantiene ciò che è selezionato ancora selezionato. Questo funziona in chrome e FF, non in IE però.

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

Usage: $('#box').insertAtCaret("[Before selection]", "[after]"); anche: non rivendicare questo come il mio in alcun modo.

Answer 3

se quanto sopra non funziona (non fu così nel mio caso - forse la mia configurazione è po 'diverso), ecco un'altra soluzione:

è possibile utilizzare questa funzione di estensione per ottenere la posizione:

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

l'utilizzo è: var position = $("#selector").getCursorPosition()

per inserire testo nella posizione:

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

Questo è tutto.