在跨平台的浏览器中获取所选文本

我想在基于浏览器的应用程序中做的事情之一是允许用户选择一些文本(不是在,只是简单的文本!),并让我的应用程序弹出一个小工具栏,然后可以与下一个交互(在我的情况下,添加注释).</p> <p>我在google上发现了很多东西,似乎专注于编写WYSIWYG编辑器,<strong>但这不是我想要的</strong>,而且大多数都在IE中工作但在FF2或3中没有.理想情况下,我想要一些可以在<strong>IE7</strong>中运行的浏览器窗口中返回当前所选文本的功能<strong>(如果可能</strong>,则返回<strong>6),FireFox 2和3以及Safari 2</strong>.如果它在Opera中有效,那将是一个奖励,但这不是必需的.</p> <p>任何人都有这样做的功能？或者从哪里开始的想法？</p><br><br><b>1> Greg Borenst..：</b><hr><p>这个jQuery插件很酷但它完成了一项非常具体的任务:用标签包装你突出显示的文本.这可能就是你想要的.但是,如果您不想(或者您处于不可能的情况)向页面添加任何无关的标记,您可以尝试使用以下解决方案:</p> <pre class="brush:bash;">function getSelectedText() { var txt = ''; if (window.getSelection) { txt = window.getSelection(); } else if (document.getSelection) { txt = document.getSelection(); } else if (document.selection) { txt = document.selection.createRange().text; } else return; return txt; } </pre> <p>此函数返回表示文本选择的对象.它可以跨浏览器工作(虽然我怀疑它返回的对象会略有不同,具体取决于浏览器,只能依赖于结果的实际文本而不是任何其他属性).</p> <p>注意:我最初在这里发现了代码片段:http://www.codetoad.com/javascript_get_selected_text.asp</p></p> <br><br><b>2> palehorse..：</b><hr><p>看看jQuery和wrapSelection插件.这可能就是你要找的东西.</p></p> </div> <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;"> </div> <div class="article_recommend"> <div class="list_top">推荐阅读</div> <div class="ListItems"> <ul class="NewsList"> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/PHP_ZhengZeBiaoD_f9015518.html" target="_blank" title="PHP正则表达式和javascript正则表达式之间有什么区别">PHP正则表达式和javascript正则表达式之间有什么区别</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《PHP正则表达式和javascript正则表达式之间有什么区别》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/PHP_ZhengZeBiaoD_f9015518.html" target="_blank" title="PHP正则表达式和javascript正则表达式之间有什么区别">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeZai_AngularJ_30e57b5d.html" target="_blank" title="如何在AngularJS Dropdown Multiselect中使用onItemSelect和onItemDeselect两个事件">如何在AngularJS Dropdown Multiselect中使用onItemSelect和onItemDeselect两个事件</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何在AngularJSDropdownMultiselect中使用onItemSelect和onItemDeselect两个事件》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeZai_AngularJ_30e57b5d.html" target="_blank" title="如何在AngularJS Dropdown Multiselect中使用onItemSelect和onItemDeselect两个事件">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Yong_^C_ZhongDua_d3d9daf7.html" target="_blank" title="用^ C中断正在运行的`npm install`是否安全？">用^ C中断正在运行的`npm install`是否安全？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《用^C中断正在运行的`npminstall`是否安全？》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/Yong_^C_ZhongDua_d3d9daf7.html" target="_blank" title="用^ C中断正在运行的`npm install`是否安全？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/AWS-_ZhaoBuDaoPe_3711653e.html" target="_blank" title="AWS:找不到配置文件(MyName)">AWS:找不到配置文件(MyName)</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《AWS:找不到配置文件(MyName)》经验，为你挑选了4个好方法。 ... <a href="https://devbox.cn/p/AWS-_ZhaoBuDaoPe_3711653e.html" target="_blank" title="AWS:找不到配置文件(MyName)">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeShiXianYiGeB_040ba574.html" target="_blank" title="如何实现一个避免未定义行为的侵入式链表？">如何实现一个避免未定义行为的侵入式链表？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何实现一个避免未定义行为的侵入式链表？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeShiXianYiGeB_040ba574.html" target="_blank" title="如何实现一个避免未定义行为的侵入式链表？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Java-space_ZaiBi_ba4122ee.html" target="_blank" title="Java:space在编译方面有所不同？">Java:space在编译方面有所不同？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Java:space在编译方面有所不同？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Java-space_ZaiBi_ba4122ee.html" target="_blank" title="Java:space在编译方面有所不同？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeZhongZhi_do__fe8863b4.html" target="_blank" title="如何终止do循环？">如何终止do循环？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何终止do循环？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeZhongZhi_do__fe8863b4.html" target="_blank" title="如何终止do循环？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/WeiShiMe_c--_Sua_ad87b1ee.html" target="_blank" title="为什么c ++算法包含最多2*(count1 + count2)-1个比较">为什么c ++算法包含最多2*(count1 + count2)-1个比较</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《为什么c++算法包含最多2*(count1+count2)-1个比较》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WeiShiMe_c--_Sua_ad87b1ee.html" target="_blank" title="为什么c ++算法包含最多2*(count1 + count2)-1个比较">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Python_GeShiDe_t_26924245.html" target="_blank" title="Python格式的timedelta大于24小时，仅显示小时？">Python格式的timedelta大于24小时，仅显示小时？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Python格式的timedelta大于24小时，仅显示小时？》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Python_GeShiDe_t_26924245.html" target="_blank" title="Python格式的timedelta大于24小时，仅显示小时？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Perl_Zai_-n_Ming_85493963.html" target="_blank" title="Perl在-n命令行选项标志上吃第一行">Perl在-n命令行选项标志上吃第一行</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Perl在-n命令行选项标志上吃第一行》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Perl_Zai_-n_Ming_85493963.html" target="_blank" title="Perl在-n命令行选项标志上吃第一行">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Zai_C-_ZhongXuan_58e19844.html" target="_blank" title="在C#中选择时出错">在C#中选择时出错</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在C#中选择时出错》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zai_C-_ZhongXuan_58e19844.html" target="_blank" title="在C#中选择时出错">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/connectedAndroid_e0056aca.html" target="_blank" title="connectedAndroidTest和发布版本类型">connectedAndroidTest和发布版本类型</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《connectedAndroidTest和发布版本类型》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/connectedAndroid_e0056aca.html" target="_blank" title="connectedAndroidTest和发布版本类型">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/--node-abort-on-_a9b580e5.html" target="_blank" title=""node -abort-on-uncaught-exception"生成的核心转储文件位于何处？">"node -abort-on-uncaught-exception"生成的核心转储文件位于何处？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《"node-abort-on-uncaught-exception"生成的核心转储文件位于何处？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/--node-abort-on-_a9b580e5.html" target="_blank" title=""node -abort-on-uncaught-exception"生成的核心转储文件位于何处？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/WeiShiMeWoYaoZai_363ec971.html" target="_blank" title="为什么我要在Dockerfile中使用VOLUME？">为什么我要在Dockerfile中使用VOLUME？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《为什么我要在Dockerfile中使用VOLUME？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WeiShiMeWoYaoZai_363ec971.html" target="_blank" title="为什么我要在Dockerfile中使用VOLUME？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeJinYong_save_e3af4164.html" target="_blank" title="如何禁用saveRow事件ui-grid">如何禁用saveRow事件ui-grid</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何禁用saveRow事件ui-grid》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeJinYong_save_e3af4164.html" target="_blank" title="如何禁用saveRow事件ui-grid">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeJieJueWuFaTi_407ea52a.html" target="_blank" title="如何解决无法添加对'Microsoft.WITDataStore'的引用？">如何解决无法添加对'Microsoft.WITDataStore'的引用？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何解决无法添加对'Microsoft.WITDataStore'的引用？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeJieJueWuFaTi_407ea52a.html" target="_blank" title="如何解决无法添加对'Microsoft.WITDataStore'的引用？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/ShiYong_SpringBo_840ec8c0.html" target="_blank" title="使用Spring Boot + REST应用程序获取"无消息可用"错误">使用Spring Boot + REST应用程序获取"无消息可用"错误</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/ShiYong_SpringBo_840ec8c0.html" target="_blank" title="使用Spring Boot + REST应用程序获取"无消息可用"错误"><img src="https://img.devbox.cn/3cccf/16086/243/0a4b7fe46a4eae26.png" width="120" height="70" alt="使用Spring Boot + REST应用程序获取"无消息可用"错误"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《使用SpringBoot+REST应用程序获取"无消息可用"错误》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/ShiYong_SpringBo_840ec8c0.html" target="_blank" title="使用Spring Boot + REST应用程序获取"无消息可用"错误">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/TeamCity_MingLin_31a2e424.html" target="_blank" title="TeamCity命令行构建步骤找不到文件">TeamCity命令行构建步骤找不到文件</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《TeamCity命令行构建步骤找不到文件》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/TeamCity_MingLin_31a2e424.html" target="_blank" title="TeamCity命令行构建步骤找不到文件">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Gulp_CuoWu_-_WuF_a579e712.html" target="_blank" title="Gulp错误:无法找到模块browserify">Gulp错误:无法找到模块browserify</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Gulp错误:无法找到模块browserify》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Gulp_CuoWu_-_WuF_a579e712.html" target="_blank" title="Gulp错误:无法找到模块browserify">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/CongAnNiuZhongDe_7ab6a75b.html" target="_blank" title="从按钮中的文本中删除下划线(Android)">从按钮中的文本中删除下划线(Android)</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《从按钮中的文本中删除下划线(Android)》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/CongAnNiuZhongDe_7ab6a75b.html" target="_blank" title="从按钮中的文本中删除下划线(Android)">[详细]</a> </div> <div style="clear:both"></div> </li> </ul> </div> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">吐了个 "CAO" !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了