javascript在光标位置插入内容

之前我写过一篇文章是通过javascript获取光标的位置——javascript获取光标位置以及设置光标位置。由于产品需要在留言板的光标处上插入表情,这样就用到了javascript在光标位置插入内容的功能了~其实原理很简单,IE下可以通过document.selection.createRange();来实现,而Firefox(火狐)浏览器则需要首先获取光标位置,然后对value进行字符串截取处理。不多说了~直接上我写的一个jQuery在光标位置插入内容插件吧~

jQuery在光标位置插入内容插件代码

(function($){
>     $.fn.extend({
>         insertAtCaret: function(myValue){
>             var $t=$(this)[0];
>             if (document.selection) {
>                 this.focus();
>                 sel = document.selection.createRange();
>                 sel.text = myValue;
>                 this.focus();
>             }
>             else 
>                 if ($t.selectionStart || $t.selectionStart == '0') {
>                     var startPos = $t.selectionStart;
>                     var endPos = $t.selectionEnd;
>                     var scrollTop = $t.scrollTop;
>                     $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
>                     this.focus();
>                     $t.selectionStart = startPos + myValue.length;
>                     $t.selectionEnd = startPos + myValue.length;
>                     $t.scrollTop = scrollTop;
>                 }
>                 else {
>                     this.value += myValue;
>                     this.focus();
>                 }
>         }
>     })    
> })(jQuery);

使用方法

$(selector).insertAtCaret("value");