光标处插入文本的jQuery插件

Zeal Blog - 泽欧里

订阅我的日志

梦想就像鸡蛋
要么孵化要么臭掉

zeal 2008-03-28 15:47 于 WebDev , 4896 字 | + 0 - 0 English

Made In Zeal 转载请保留原始链接：http://www.zeali.net/entry/561

本文提供用于往文本框[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

引用本文(TrackBack): 此功能无限期关闭ing ... 如有引用请在文中标明出处并提供超链接

5 条评论:

- 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

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

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

如果您不是没有思想的机器Spammer，请告诉我 4 + 8 = ？

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

1. 使用您的 OpenID

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

2. 使用传统留言格式

(必填) 名字

(选填) URL

(选填) Email

并写下您的见解:

记住我?
是
否

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

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

发贴统计

日志 598 , 评论 1264

JAVA/C++(32/89)
PHP(29/50)
WebDev(61/136)
RubyOnRails(11/8)
开发/理论(80/89)
网络(76/181)
幽默(26/30)
感悟(13/27)
体育(35/49)
数码影像(40/119)
杂言乱语(53/105)
懒人散记(55/368)
网摘分享(87/13)

日志存档

2008年 05月
2008年 04月
2008年 03月
2008年 02月
2008年 01月
2007年 12月
2007年 11月
2007年 10月
2007年 09月
2007年 08月
2007年 07月
2007年 06月
2007年 05月
2007年 04月
2007年 03月
2007年 02月
2007年 01月
2006年 12月
2006年 11月
2006年 10月
2006年 09月
2006年 08月
2006年 07月
2006年 06月
2006年 05月
2006年 04月
2006年 03月
2006年 02月
2006年 01月
2005年 12月
2005年 11月
2005年 10月
2005年 09月
2005年 08月
2005年 07月
2005年 06月
2005年 05月
2005年 04月

按日期检索

本 Blog 原创内容
遵循以下授权:

Creative Commons
(创作共用) CC
署名-非商业性
-相同方式分享

Zeal Blog 基于

Pivot1.24.1 开发

Launched @ 2005-04-27