web-dev-qa-db-ja.com

テキスト領域のカーソル位置の後にテキストを挿入する

以下のスクリプトは、テキスト領域の最後にテキストを挿入します。テキスト領域の現在のカーソル位置の後にテキストを挿入するように変更する必要があります。

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;
    });
});
jquerytextareajavascript
11
Captain Comic

チェックアウトできます この回答 。 insertAtCaretjqueryプラグインはとてもいいようです。

14
Darin Dimitrov

上記が機能しない場合（私の場合は機能しませんでした-おそらく私の構成は少し異なります）、ここに別の解決策があります：

この拡張機能を使用して、位置を取得できます。

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

使用法は次のとおりです：var position = $("#selector").getCursorPosition()

その位置にテキストを挿入するには：

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

それで全部です。

22
d.popov

これらのさまざまなバージョンを変更して、最初のテキストを選択したものの前に配置し、2番目のテキストを選択したものの後に配置して、選択したものを選択したままにするバージョンを作成しました。これはchromeとFFで機能しますが、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();
    }
  })
    }
});
_

使用法：$('#box').insertAtCaret("[Before selection]", "[after]");また：これを私のものとして主張しないでください。

3
Tazmanian Tad