首页 > JavaScript > javascript在光标位置插入内容

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

相关文章

"javascript在光标位置插入内容"已有7条评论
    taxuewuhen

    博主,想问一下你的空间和域名哪里买的,貌似是国外的,我也想买一个

    2010年05月14日 21:54 回复 引用

    断桥残雪

    空间是dreamhost,域名是godaddy的~

    2010年05月14日 22:08 回复 引用

    taxuewuhen

    @断桥残雪
    你找代理买的还是自己买的

    2010年05月14日 22:27 回复 引用

    bestdong

    Dear, 断桥残雪

    一定要有博客吗?独立只安装一个爱墙可以吗?

    Your sincerely,

    2010年05月15日 04:36 回复 引用

    民族证券

    朋友推荐过来的…文章有深度.

    2010年05月21日 10:29 回复 引用

    皇家元林

    很短的域名啊
    这个IN域名价格不菲啊

    2010年05月23日 22:05 回复 引用

    潇洒

    果然很 in !

    2011年07月27日 23:32 回复 引用

文明发言,你好我也好
正在提交,请稍后...
返回顶部