6赞

如何在文本框中获取插入符号的(x,y)像素坐标？

作者：mobiledu2402852413 | 2023-09-06 09:11

如何解决《如何在文本框中获取插入符号的(x,y)像素坐标？》经验，为你挑选了1个好方法。

我正在使用jQuery并试图找到一种跨浏览器的方式来获取插入符号</code>和<code>input</code>盒子中的插入符号,这样我就可以在这个位置放置一个绝对定位的div.</p> <p>有一些jQuery插件吗？或者JavaScript代码片段就是这么做的？</p><br><br><b>1> Dan Dascales..：</b><hr><p>我已经为meteor-autocomplete寻找了textarea插入符号插件,所以我已经评估了GitHub上的所有8个插件.到目前为止,胜利者是来自<strong>Component的</strong>textarea-caret-position.<strong></strong></p> <h2>特征</h2> <p> <p>像素精度</p> <p>没有任何依赖</p> <p>浏览器兼容性:Chrome,Safari,Firefox(尽管有两个漏洞),IE9 +; 可以工作,但没有在Opera,IE8或更早版本中测试过</p> <p>支持任何字体系列和大小,以及文本转换</p> <p>文本区域可以具有任意填充或边框</p> <p>不会被textarea中的水平或垂直滚动条混淆</p> <p>支持硬回车,标签(IE上除外)和文本中的连续空格</p> <p>在比文本区域中的列长的行上的正确位置</p> <p>当包裹长词时,在行尾的空白处没有"鬼"位置</p> <p> <h3>这是一个演示 - http://jsfiddle.net/dandv/aFPA7/</h3> <p><img rel="nofollow noreferrer" src="https://img.devbox.cn/3cccf/16086/243/7a4ce818aebe26ff.png" alt="在此输入图像描述"></noimg></p> <h2>这个怎么运作</h2> <p><code><div></code>屏幕外创建一面镜子,风格与之完全相同<code><textarea></code>.然后,直到插入符号的textarea的文本被复制到div中,并且<code><span></code>在它之后插入a .然后,跨度的文本内容被设置为textarea中文本的剩余部分,以便忠实地再现人造div中的包装.</p> <p>这是保证处理与包装长行相关的所有边缘情况的唯一方法.它也被GitHub用来确定其<strong>@</strong>用户下拉列表的位置.</p></p> <hr>我只是注意到在"ranodm"文本之间,你有Carly Rae Jepsen的歌词 - Call Me Maybe(http://www.youtube.com/watch?v=fWNaR-rxAic).但很好的建议!但是,它最近的Chrome版本有一个错误.您可以从一行的开头到中间进行选择.然后单击该行的开始.红线不会移动. <hr>你是魔术师.我不知道你是如何工作的. </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/AngularJS_ShiFou_cf28f5ed.html" target="_blank" title="AngularJS是否将变量保存到文件中？">AngularJS是否将变量保存到文件中？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《AngularJS是否将变量保存到文件中？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/AngularJS_ShiFou_cf28f5ed.html" target="_blank" title="AngularJS是否将变量保存到文件中？">[详细]</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/Android-_ShuJuBa_259c84f1.html" target="_blank" title="Android:数据绑定,notifyPropertyChanged()无法正常工作？">Android:数据绑定,notifyPropertyChanged()无法正常工作？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Android:数据绑定,notifyPropertyChanged()无法正常工作？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Android-_ShuJuBa_259c84f1.html" target="_blank" title="Android:数据绑定,notifyPropertyChanged()无法正常工作？">[详细]</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/C--_BiaoZhunShiF_c5b6773f.html" target="_blank" title="C++标准是否指定浮点数表示的任何内容？">C++标准是否指定浮点数表示的任何内容？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《C++标准是否指定浮点数表示的任何内容？》经验，为你挑选了3个好方法。 ... <a href="https://devbox.cn/p/C--_BiaoZhunShiF_c5b6773f.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/LiJiChuangKouZho_cb06a1f6.html" target="_blank" title="立即窗口中的F#">立即窗口中的F#</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《立即窗口中的F#》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/LiJiChuangKouZho_cb06a1f6.html" target="_blank" title="立即窗口中的F#">[详细]</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/BuKeNengZai_Fire_d6144b2c.html" target="_blank" title="不可能在Firefox中使用Twitter时间线？">不可能在Firefox中使用Twitter时间线？</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/BuKeNengZai_Fire_d6144b2c.html" target="_blank" title="不可能在Firefox中使用Twitter时间线？"><img src="https://img.devbox.cn/3cccf/16086/243/f6fa5d24bcf9dc1a.png" width="120" height="70" alt="不可能在Firefox中使用Twitter时间线？"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《不可能在Firefox中使用Twitter时间线？》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/BuKeNengZai_Fire_d6144b2c.html" target="_blank" title="不可能在Firefox中使用Twitter时间线？">[详细]</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_angular_1fc6758d.html" target="_blank" title="为什么angular.forEach上下文？">为什么angular.forEach上下文？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《为什么angular.forEach上下文？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WeiShiMe_angular_1fc6758d.html" target="_blank" title="为什么angular.forEach上下文？">[详细]</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/Symfony_AnZhuang_30056cc2.html" target="_blank" title="Symfony安装缺少的供应商库">Symfony安装缺少的供应商库</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Symfony安装缺少的供应商库》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Symfony_AnZhuang_30056cc2.html" target="_blank" title="Symfony安装缺少的供应商库">[详细]</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_python_Zhong_95e71693.html" target="_blank" title="在python中使用递归来反转列表">在python中使用递归来反转列表</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在python中使用递归来反转列表》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/Zai_python_Zhong_95e71693.html" target="_blank" title="在python中使用递归来反转列表">[详细]</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/JinYongZai_PM2_Z_c7d7dba1.html" target="_blank" title="禁用在PM2中重新启动">禁用在PM2中重新启动</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《禁用在PM2中重新启动》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/JinYongZai_PM2_Z_c7d7dba1.html" target="_blank" title="禁用在PM2中重新启动">[详细]</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/ESAPI-_ShiYongJi_fbf583c1.html" target="_blank" title="ESAPI - 使用禁止的依赖项获取NoClassDefFoundError(LoggerFactory)">ESAPI - 使用禁止的依赖项获取NoClassDefFoundError(LoggerFactory)</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《ESAPI-使用禁止的依赖项获取NoClassDefFoundError(LoggerFactory)》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ESAPI-_ShiYongJi_fbf583c1.html" target="_blank" title="ESAPI - 使用禁止的依赖项获取NoClassDefFoundError(LoggerFactory)">[详细]</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/JAXB_BuHuiWeiMei_e917a60b.html" target="_blank" title="JAXB不会为枚举生成枚举">JAXB不会为枚举生成枚举</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《JAXB不会为枚举生成枚举》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/JAXB_BuHuiWeiMei_e917a60b.html" target="_blank" title="JAXB不会为枚举生成枚举">[详细]</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_AndroidHTML5_2fe07e40.html" target="_blank" title="在Android HTML5播放器中开始播放所需的用户手势">在Android HTML5播放器中开始播放所需的用户手势</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在AndroidHTML5播放器中开始播放所需的用户手势》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Zai_AndroidHTML5_2fe07e40.html" target="_blank" title="在Android HTML5播放器中开始播放所需的用户手势">[详细]</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/ImportError-_Don_17dcf327.html" target="_blank" title="ImportError:动态模块没有定义模块导出函数(PyInit__caffe)">ImportError:动态模块没有定义模块导出函数(PyInit__caffe)</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《ImportError:动态模块没有定义模块导出函数(PyInit__caffe)》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ImportError-_Don_17dcf327.html" target="_blank" title="ImportError:动态模块没有定义模块导出函数(PyInit__caffe)">[详细]</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/Bash_TiShiJiaoBe_852c64bb.html" target="_blank" title="Bash提示脚本">Bash提示脚本</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Bash提示脚本》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Bash_TiShiJiaoBe_852c64bb.html" target="_blank" title="Bash提示脚本">[详细]</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/ShuiPing_Recycle_1398ced6.html" target="_blank" title="水平RecyclerView与开始填充">水平RecyclerView与开始填充</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《水平RecyclerView与开始填充》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/ShuiPing_Recycle_1398ced6.html" target="_blank" title="水平RecyclerView与开始填充">[详细]</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/UIStackview_JuYo_fcbb4809.html" target="_blank" title="UIStackview具有不同对齐的子视图">UIStackview具有不同对齐的子视图</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/UIStackview_JuYo_fcbb4809.html" target="_blank" title="UIStackview具有不同对齐的子视图"><img src="https://img.devbox.cn/3cccf/16086/243/4252a71e1dc6e95e.png" width="120" height="70" alt="UIStackview具有不同对齐的子视图"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《UIStackview具有不同对齐的子视图》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/UIStackview_JuYo_fcbb4809.html" target="_blank" title="UIStackview具有不同对齐的子视图">[详细]</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/RuHeShiYong_Lara_137b5bf6.html" target="_blank" title="如何使用Laravel将身份验证从一个用户切换到另一个用户">如何使用Laravel将身份验证从一个用户切换到另一个用户</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何使用Laravel将身份验证从一个用户切换到另一个用户》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/RuHeShiYong_Lara_137b5bf6.html" target="_blank" title="如何使用Laravel将身份验证从一个用户切换到另一个用户">[详细]</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/WeiFuWu_-_FenJie_b85f9520.html" target="_blank" title="微服务:分解基于图形数据库的应用程序">微服务:分解基于图形数据库的应用程序</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/WeiFuWu_-_FenJie_b85f9520.html" target="_blank" title="微服务:分解基于图形数据库的应用程序"><img src="https://img.devbox.cn/3cccf/16086/243/89e8e7df87d832a6.png" width="120" height="70" alt="微服务:分解基于图形数据库的应用程序"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《微服务:分解基于图形数据库的应用程序》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/WeiFuWu_-_FenJie_b85f9520.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/FacebookInstantA_4d0e1cb0.html" target="_blank" title="Facebook Instant Articles错误"HTML元素不包含任何文本:避免包含空HTML元素"">Facebook Instant Articles错误"HTML元素不包含任何文本:避免包含空HTML元素"</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/FacebookInstantA_4d0e1cb0.html" target="_blank" title="Facebook Instant Articles错误"HTML元素不包含任何文本:避免包含空HTML元素""><img src="https://img.devbox.cn/3cccf/16086/243/0ee42a7fd2ff01cd.png" width="120" height="70" alt="Facebook Instant Articles错误"HTML元素不包含任何文本:避免包含空HTML元素""/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《FacebookInstantArticles错误"HTML元素不包含任何文本:避免包含空HTML元素"》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/FacebookInstantA_4d0e1cb0.html" target="_blank" title="Facebook Instant Articles错误"HTML元素不包含任何文本:避免包含空HTML元素"">[详细]</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/ZaiWeiBingZhongS_7ed7181d.html" target="_blank" title="在卫兵中使用功能时的二郎"非法守卫表达"">在卫兵中使用功能时的二郎"非法守卫表达"</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在卫兵中使用功能时的二郎"非法守卫表达"》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ZaiWeiBingZhongS_7ed7181d.html" target="_blank" title="在卫兵中使用功能时的二郎"非法守卫表达"">[详细]</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" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册