关于javascript：如何在文本框中获取插入符号的(x，y)像素坐标？

我正在使用jQuery，并尝试找到一种跨浏览器的方式来获取</wyn> s和<wyn>input</wyn>框中插入符号的像素坐标，以便可以在该位置周围放置一个绝对定位的div。 </p> <p> 是否有一些jQuery插件？ 还是JavaScript代码段可以做到这一点？ </p> <hr> <p> 我一直在寻找用于流星自动完成的textarea插入符号坐标插件，因此我已经评估了GitHub上的所有8个插件。到目前为止，获胜者是Component的textarea-caret职位。 </p> <p>特征</p> <ul> <li> 像素精度 </li> <li> 没有任何依赖 </li> <li> 浏览器兼容性：Chrome，Safari，Firefox(尽管有两个错误)，IE9 +；可能有效，但未在Opera，IE8或更旧版本中进行测试 </li> <li> 支持任何字体系列和大小，以及文本转换 </li> <li> 文本区域可以具有任意填充或边框 </li> <li> 不会被文本区域中的水平或垂直滚动??条弄糊涂 </li> <li> 支持硬返回，制表符(IE上除外)和文本中的连续空格 </li> <li> 比文本区域中的列长的行上的正确位置 </li> <li> 包装长字时，在行尾空白处没有"重影"位置 </li> </ul> <p>这是一个演示-http://jsfiddle.net/dandv/aFPA7/</p> <p> <img src="/d/file/2023041308/ofpf2l4yaag58.webp" alt="enter image description here"> </p> <p>怎么运行的</p> <p> 在屏幕外创建镜像<wyn></wyn>，其样式与<wyn><textarea></wyn>完全相同。然后，将直到插入号的文本区域的文本复制到div中，并在其后插入<wyn><span></wyn>。然后，将跨度的文本内容设置为textarea中文本的其余部分，以便忠实地复制人造div中的环绕。 </p> <p> 这是保证处理所有与包裹长行有关的边缘情况的唯一方法。 GitHub还使用它来确定其@用户下拉列表的位置。 </p> <hr> <p> 注意：此答案描述了如何获取文本光标/插入符号的字符坐标。要找到像素坐标，您需要进一步扩展它。 </p> <p> 首先要记住的是，光标可以处于三种状态 </p> <ul> <li> 在特定位置的常规插入光标 </li> <li> 具有一定边界区域的文本选择 </li> <li> 未激活：textarea没有焦点。尚未使用。 </li> </ul> <p> IE模型使用Object document.selection，从中我们可以得到一个TextRange对象，该对象使我们可以访问选择内容以及光标位置。 </p> <p> FF模型/ Opera使用方便的变量[input] .selectionStart和selectionEnd。 </p> <p> 两种模型都将常规的ative游标表示为零宽度选择，左边界为游标位置。 </p> <p> 如果输入字段没有焦点，您可能会发现两者均未设置。<br /> 使用以下代码在当前光标位置插入一段文本，并替换当前选择(如果存在的话)，我取得了很好的成功。<br /> 根据确切的浏览器，YMMV。 </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br /></div></td><td><div class="javascript codecolorer"><span class="kw1">function</span> insertAtCursor<span class="br0">(</span>myField<span class="sy0">,</span> myValue<span class="br0">)</span> <span class="br0">{</span><br /> <br /> <span class="coMULTI">/* selecion model - ie */</span><br /> <span class="kw1">if</span> <span class="br0">(</span>document.<span class="me1">selection</span><span class="br0">)</span> <span class="br0">{</span><br />   myField.<span class="me1">focus</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span><br />   sel <span class="sy0">=</span> document.<span class="me1">selection</span>.<span class="me1">createRange</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span><br />   sel.<span class="me1">text</span> <span class="sy0">=</span> myValue<span class="sy0">;</span><br /> <span class="br0">}</span><br /> <br /> <span class="coMULTI">/* field.selectionstart/end  firefox */</span> <br /> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">(</span>myField.<span class="me1">selectionStart</span> <span class="sy0">||</span> myField.<span class="me1">selectionStart</span> <span class="sy0">==</span> <span class="st0">'0'</span> <span class="br0">)</span> <span class="br0">{</span><br /> <br />   <span class="kw1">var</span> startPos <span class="sy0">=</span> myField.<span class="me1">selectionStart</span><span class="sy0">;</span><br />   <span class="kw1">var</span> endPos <span class="sy0">=</span> myField.<span class="me1">selectionEnd</span><span class="sy0">;</span><br />   myField.<span class="me1">value</span> <span class="sy0">=</span> myField.<span class="me1">value</span>.<span class="me1">substring</span><span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span> startPos<span class="br0">)</span><br />     <span class="sy0">+</span> myValue<br />     <span class="sy0">+</span> myField.<span class="me1">value</span>.<span class="me1">substring</span><span class="br0">(</span>endPos<span class="sy0">,</span> myField.<span class="me1">value</span>.<span class="me1">length</span><span class="br0">)</span><span class="sy0">;</span><br /> <br />   myField.<span class="me1">selectionStart</span> <span class="sy0">=</span> startPos <span class="sy0">+</span> myValue.<span class="me1">length</span><span class="sy0">;</span><br />   myField.<span class="me1">selectionEnd</span> <span class="sy0">=</span> startPos <span class="sy0">+</span> myValue.<span class="me1">length</span><span class="sy0">;</span><br />   myField.<span class="me1">focus</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span><br /> <span class="br0">}</span> <br /> <br /> <span class="co1">// cursor not active/present</span><br /> <span class="kw1">else</span> <span class="br0">{</span><br />   myField.<span class="me1">value</span> <span class="sy0">+=</span> myValue<span class="sy0">;</span><br /> <span class="br0">}</span></div></td></tr></tbody></table></div> <p> 错误提示：链接未在顶部段落中正确标记。 </p> <p> 选择对象：http://msdn.microsoft.com/zh-cn/library/ms535869(VS.85).aspx<br /> TextRange对象：http://msdn.microsoft.com/zh-cn/library/ms535872(VS.85).aspx </p> <p><center> </center></p> <hr> <p> 我不认为可以在所有浏览器中完成。有人在IE6中完成了此操作，但在FF或Opera(AFAIK)中不起作用。也许您可以使其在所有浏览器中正常工作。 </p> <p> 这是2005年的博客文章。 </p> <p><center> </center></p> <hr></div> <p><center> </center></p></td> </tr> </tbody> </table><p><i class="icon-biaoqian iconfont"></i><a href="/list/xiangsu.html" title="像素" class="c1" target="_blank">像素</a><a href="/list/wenbon.html" title="文本" class="c1" target="_blank">文本</a><a href="/list/kualiulanqi.html" title="跨浏览器" class="c1" target="_blank">跨浏览器</a><a href="/list/weizhi.html" title="位置" class="c1" target="_blank">位置</a></p> <p class="share"><b>免责声明：</b>本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。</p> </div> </div> <div class="whitebg"> <h2 class="htitle">最新内容</h2> <div class="new-link-notice"> <ul class="new-link"> <script src="/data/new.js"></script> </ul> </div> </div> <div class="whitebg"> <h2 class="htitle">相关内容</h2> <ul class="other-link"> <li><a href="/zhishi/eQHk.html" target="_blank"><i><img src="/d/img/202313/tongyong11.webp" alt="使用Python总结文本文章"></i><p>使用Python总结文本文章</p><span>使用Python总结文本文章，技术，平台，数字，文本，数据，培训，信息，价值，公司，时间，文本摘要涉及减少文本中的单词数量，同时保持其意义。它提高了效</span></a></li><li><a href="/zhishi/eQKd.html" target="_blank"><i><img src="/d/img/202313/ty68.webp" alt="python二进制dat数据怎么转成txt文"></i><p>python二进制dat数据怎么转成txt文</p><span>python二进制dat数据怎么转成txt文本，单位，数据，分行，培训，文本，字符，以上，格式，方法，更多，python将二进制转换为txt文本的方法：1、首先用open</span></a></li><li><a href="/zhishi/eQkl.html" target="_blank"><i><img src="/d/img/202313/tongyong8.webp" alt="python如何读取列表中元素的位置?"></i><p>python如何读取列表中元素的位置?</p><span>python如何读取列表中元素的位置?，位置，数据，异常，培训，字符串，元素，索引，方法，示例，结果，python读取列表中元素位置的方法：1、使用index()方</span></a></li><li><a href="/zhishi/eQkR.html" target="_blank"><i><img src="/d/img/202313/ty44.webp" alt="文本处理用c还是用python"></i><p>文本处理用c还是用python</p><span>文本处理用c还是用python，位置，培训，包装，对比，字符串，函数，文本，语言，字符，效率，文本处理python与c的对比：如下c++语言：C++语言实现C++中没有</span></a></li><li><a href="/zhishi/eQsc.html" target="_blank"><i><img src="/d/img/202313/ty37.webp" alt="python如何读取像素值"></i><p>python如何读取像素值</p><span>python如何读取像素值，环境，设备，培训，像素，函数，坐标，逻辑，原型，示例，模块，python如何读取像素值的方法：使用image模块中的getpixel函数获得</span></a></li><li><a href="/zhishi/eQms.html" target="_blank"><i><img src="/d/img/202313/tongyong15.webp" alt="怎么查看python模块在什么位置"></i><p>怎么查看python模块在什么位置</p><span>怎么查看python模块在什么位置，位置，代码，培训，模块，路径，下面，以上，文件，方法，更多，查看python模块在什么位置的方法：若要获取模块的文件名为</span></a></li><li><a href="/zhishi/eQkn.html" target="_blank"><i><img src="/d/img/202313/ty56.webp" alt="怎么找到苹果电脑 python安装位置"></i><p>怎么找到苹果电脑 python安装位置</p><span>怎么找到苹果电脑 python安装位置，系统，位置，培训，版本，苹果电脑，终端，路径，命令，里面，以上，Mac系统自带python路径为:/System/Library/Frame</span></a></li><li><a href="/zhishi/eQ4z.html" target="_blank"><i><img src="/d/img/202313/tongyong6.webp" alt="python如何进行文本切割"></i><p>python如何进行文本切割</p><span>python如何进行文本切割，连续，培训，网址，字符串，方法，字符，参数，空格，表示，制表符，python的split()方法可以实现将一个字符串按照指定的分隔</span></a></li><li><a href="/zhishi/eQcf.html" target="_blank"><i><img src="/d/img/202313/ty46.webp" alt="python注释一般放在什么位置"></i><p>python注释一般放在什么位置</p><span>python注释一般放在什么位置，代码，位置，培训，注释，时间，引号，可能会，不可或缺，变量，语句，python写代码注释是一件很重要的事情，如果你写的一段</span></a></li><li><a href="/zhishi/ePCY.html" target="_blank"><i><img src="/d/img/202313/ty60.webp" alt="python新手必看之文本文件的输入输"></i><p>python新手必看之文本文件的输入输</p><span>python新手必看之文本文件的输入输出，培训，标准，数据，文件，对象，输入输出，新手，模式，功能，内容，Python具有基本的文本文件读写功能。Python的</span></a></li><li><a href="/zhishi/ePFr.html" target="_blank"><i><img src="/d/img/202313/ty67.webp" alt="python如何理解Python中整型对象存"></i><p>python如何理解Python中整型对象存</p><span>python如何理解Python中整型对象存储的位置?，位置，地址，代码，培训，内存，开辟，对象，整数，分配，存在，在Python整型对象所存储的位置是不同的,有</span></a></li><li><a href="/zhishi/eP7.html" target="_blank"><i><img src="/d/img/202312/tongyong16.webp" alt="python位置参数是什么"></i><p>python位置参数是什么</p><span>python位置参数是什么，位置，电脑，培训，环境，系统，参数，函数，字符串，例子，数量，python位置参数是什么本文教程操作环境：windows7系统、Python3.</span></a></li></ul> </div> </div> <div class="rbox"> <div class="whitebg paihang"> <h2 class="htitle">热门文章</h2> </div> <div class="whitebg tuijian"> <h2 class="htitle">推荐文章</h2> </div> <div class="whitebg cloud"> <h2 class="htitle">标签云</h2> <ul> </ul> </div> <div class="whitebg wenzi"> <h2 class="htitle">猜你喜欢</h2> <ul> <script type="text/javascript" src="/data/rand.js"></script> </ul> </div> </div> </article> <footer> <div class="footer_wrap"> <div class="footer_tool fr"> <a href="javascript:;" class="footer_phone"><em class="iconfont icon-shouji"></em><div class="qrcode ts"><img src="/css/qrcode/?str=https://m.jsk.cc/" alt="计算客"><p>扫码手机访问</p></div></a> <div class="wxbox"><div class="footer_icon"><img src="/css/img/icon.png"></div></div> </div> <div class="endnav"> <p>公益性知识科普性站点，所涵盖的内容、图片等数据系，部分原创内容未能与原作者取得联系。</p> <p>若涉及版权问题，请联系（kkyves#163.com / wechat: jisuanke2022），我们第一时间进行删除/修改！</p> </div> </div> <a href="#"><div class="top icon-retop iconfont"></div></a> <div class="footer_copyright"> <div class="container"> <span> Copyright © <a href="https://www.jsk.cc" target="_blank">计算客</a> @2023 jsk.cc <a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn">蜀ICP备2023033106号-2</a> </span> <i class="fr">计算客 · 开发知识</i> </div> </div> </footer> <script type="text/javascript" src="/css/js/theia-sticky-sidebar.min.js"></script> <script type="text/javascript" src="/css/js/tool.min.js"></script> <script type="text/javascript" src="/css/js/like.ajax.js"></script> </body> </html>