光标处插入文本的jQuery插件

ZEAL Blog·厉

订阅我的日志

We stand alone,

together.

- BAND of BROTHERS

光标处插入文本的jQuery插件

Posted by zeal on 2008-03-28 15:47 , 4896 characters | + 0 - 0 English

转载请保留本行原始出处声明信息 : http://www.zeali.net/entry/561 MaDe1nZEAL

本文提供用于往文本框[input:text , textarea]光标当前位置插入内容以及选中页面指定元素内容的js脚本，采用基于jQuery的插件形式。在 IE6,7 / Firefox / Safari / Opera 下测试通过。

jquery.caretInsert.js :

jQuery.extend({ /** * 清除当前选择内容 */ unselectContents: function(){ if(window.getSelection) window.getSelection().removeAllRanges(); else if(document.selection) document.selection.empty(); } }); jQuery.fn.extend({ /** * 选中内容 */ selectContents: function(){ $(this).each(function(i){ var node = this; var selection, range, doc, win; if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof win.getSelection != 'undefined' && typeof doc.createRange != 'undefined' && (selection = window.getSelection()) && typeof selection.removeAllRanges != 'undefined') { range = doc.createRange(); range.selectNode(node); if(i == 0){ selection.removeAllRanges(); } selection.addRange(range); } else if (document.body && typeof document.body.createTextRange != 'undefined' && (range = document.body.createTextRange())) { range.moveToElementText(node); range.select(); } }); }, /** * 初始化对象以支持光标处插入内容 */ setCaret: function(){ if(!$.browser.msie) return; var initSetCaret = function(){ var textObj = $(this).get(0); textObj.caretPos = document.selection.createRange().duplicate(); }; $(this) .click(initSetCaret) .select(initSetCaret) .keyup(initSetCaret); }, /** * 在当前对象光标处插入指定的内容 */ insertAtCaret: function(textFeildValue){ var textObj = $(this).get(0); if(document.all && textObj.createTextRange && textObj.caretPos){ var caretPos=textObj.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? textFeildValue+'' : textFeildValue; } else if(textObj.setSelectionRange){ var rangeStart=textObj.selectionStart; var rangeEnd=textObj.selectionEnd; var tempStr1=textObj.value.substring(0,rangeStart); var tempStr2=textObj.value.substring(rangeEnd); textObj.value=tempStr1+textFeildValue+tempStr2; textObj.focus(); var len=textFeildValue.length; textObj.setSelectionRange(rangeStart+len,rangeStart+len); textObj.blur(); } else { textObj.value+=textFeildValue; } } });

demo代码段 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript" src="./jquery.caretInsert.js"></script> </head> <body> <div><span id="item">TestText</span></div> <div><input id="hello" type="text" style="width: 200px;" /></div> <div><input type="button" value="Inert on input" id="insertA" /></div> <div><textarea id="world" style="width: 200px;height:50px;"></textarea> <div><input type="button" value="Inert on Textarea" id="insertT" /></div> <script language="JavaScript" type="text/javascript"> (function($){ $('#hello').setCaret(); $('#insertA').click(function(){ $('#hello').insertAtCaret($('#item').text()); }); $('#world').setCaret(); $('#insertT').click(function(){ $('#world').insertAtCaret($('#item').text()); }); $('#item').hover( function(){ $(this).selectContents(); }, function(){ $.unselectContents(); }); })($); </script> </body></html>

代码主要来源： http://www.albertsong.com/read-68.html

对于这篇日志有什么看法？我想听听您的高见:

您也可以在页面底部的 Google Friend Connect 工具栏进行评论，体验更好的互动交流 »

首先为了证明您不是没有思想的机器Spammer，请告诉我 4 + 8 = ？

然后任选以下两种方式之一告诉我您的身份：

1. 使用您的 OpenID

在ZeaLi.net注册OpenID 什么是OpenID?

2. 使用传统留言格式

(必填) 名字

(选填) URL

(选填) Email

并写下您的见解:

记住我?
是
否

如何进行评论当有新回复时给我发送邮件通知

除了 <b> 和 <i> 之外，其他的HTML标签都将从您的评论中去除. URL 或 Email 地址会被自动加上链接.
当您点击发表或者预览之后，系统会自动保存您此次评论的内容，以便当网络原因发表失败时直接按Ctrl-V重新粘贴上次评论内容。
注意：快捷键及自动拷贝功能仅对IE浏览器有效。

6 条评论:

- su27 (link) 于 2008-03-29 11:54

非常有用，谢谢楼主分享！

有个疑惑：$(this).get(0)和$(this)[0]是等价的吧，和this有什么区别呢？在firebug里面打出来确实是一样的，但是在IE下用this是不行的。

- zeal (link) ^verified 于 2008-03-29 22:13

this指向的是jQuery对象，$(this)[0]或 $(this).get(0)则返回jQuery对象集包装下的第一个匹配的dom对象。

- su27 (link) 于 2008-03-29 23:42

我说的是你插件中61行这句。我开始理解错了，以为this是<textarea>,那么$(this)[0]就和this是一样的，所以不知道为什么要这样写。刚才想到this其实是包装后的<textarea>, 所以61句其实可以只写this[0]。

- phpbird (link) 于 2008-04-23 12:29

原来也找过这种功能的实现，但是不是jq的。
能换个连接么？

- phpbird (link) 于 2008-04-23 12:30

不好意思，我以为邮件是不显示的，能帮忙把上面的邮件地址删除掉么？

- bolo () (link) 于 2009-11-06 21:23