2011-03-05 61 views
11

Tập lệnh bên dưới chèn văn bản vào cuối vùng văn bản. Tôi cần thay đổi thành chèn văn bản sau vị trí con trỏ hiện tại trong vùng văn bản.Chèn văn bản sau vị trí con trỏ trong văn bản là

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

có thể trùng lặp của [Chèn văn bản vào vùng văn bản với jQuery] (http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery) – bummi

Trả lời

12

Bạn có thể thanh toán this answer. Plugin jquery insertAtCaret có vẻ rất đẹp.

+5

thực sự liên kết đến phiên bản không hoạt động. Cái ở trên là cái bạn muốn. Dưới đây là phần mềm http://jsfiddle.net/rmDzu/2/ – John

3

Tôi đã sửa đổi nhiều phiên bản khác nhau để đưa ra phiên bản đặt văn bản đầu tiên trước bất kỳ nội dung nào bạn đã chọn và văn bản thứ hai sau nội dung bạn đã chọn và giữ nội dung được chọn vẫn được chọn. Điều này làm việc trong chrome và FF, không phải trong IE mặc dù.

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

Cách sử dụng: $('#box').insertAtCaret("[Before selection]", "[after]"); Ngoài ra: không tuyên bố này như tôi trong bất kỳ cách nào.

22

nếu ở trên không hoạt động (nó không trong trường hợp của tôi - có thể cấu hình của tôi là một chút khác nhau), đây là một giải pháp:

bạn có thể sử dụng chức năng mở rộng này để có được vị trí:

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

việc sử dụng là: var position = $("#selector").getCursorPosition()

để chèn văn bản tại vị trí:

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

Đó là tất cả.

+0

Cảm ơn, rất hữu ích cho việc triển khai Angular JS vì các sửa đổi insertAtCaret() sẽ không hoạt động trong trường hợp ràng buộc ng-model. – Denis

+0

Hoạt động tốt để chèn văn bản ở vị trí con trỏ. Lưu ý rằng nếu người dùng đã chọn một số văn bản, nó sẽ chèn trước khi lựa chọn, thay vì thay thế nó (được thử nghiệm trong Chrome). – rybo111

+0

Hàm getCursorPosition sẽ thay đổi thành 'document.getElementById ('textarea'). SelectionStart;' hoặc 'document.getElementById ('textarea'). SelectionEnd;' –

Các vấn đề liên quan