关于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/jc/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></article> <script> window.onload=function(){ var imgs = document.getElementsByTagName('img'); for(var i = 0;imgs[i];i++){ var thttp = imgs[i].getAttribute('src').indexOf("http"); var tok = imgs[i].getAttribute('src').indexOf("//"); if(thttp == -1 || tok == -1) {imgs[i].setAttribute('src', 'https://www.ezd.cc' + (imgs[i].getAttribute('src') || ''));} } } </script> <div class="entry-meta"> <div class="articleinfo-tag"><i class="iconfont icon-biaoqian"></i><a href="/tags/xiangsu.html" title="像素" class="c1" target="_blank">像素</a><a href="/tags/wenbon.html" title="文本" class="c1" target="_blank">文本</a><a href="/tags/kualiulanqi.html" title="跨浏览器" class="c1" target="_blank">跨浏览器</a><a href="/tags/weizhi.html" title="位置" class="c1" target="_blank">位置</a></div> </div> </div> <div class="relatebox"> <div class="relatebox-lists"> <h3>推荐阅读<span></span></h3> <div class="relatebox-articles"> <ul> <article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcz8.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/61.webp" alt="电脑内存的插槽在哪|电脑内存的插槽在哪个位置" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcz8.html" title="电脑内存的插槽在哪|电脑内存的插槽在哪个位置">电脑内存的插槽在哪|电脑内存的插槽在哪个</a></h2> </div> <p class="text-muted meta">电脑内存的插槽在哪|电脑内存的插槽在哪个位置，，1. 电脑内存的插槽在哪个位置手机卡上的内存卡常见为tf卡（小卡）。 . 智能手机可以通过数据</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LclW.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030506/e2hxdklsihl54.webp" alt="wps表格设置成文本格式|wps表格中设置文本格式" /></span></a></p> <div class="title"> <h2><a href="/zs/LclW.html" title="wps表格设置成文本格式|wps表格中设置文本格式">wps表格设置成文本格式|wps表格中设置文本</a></h2> </div> <p class="text-muted meta">wps表格设置成文本格式|wps表格中设置文本格式，设置成,表格,文本,格式，1.wps表格中怎么设置文本格式软件版本：Office2013方法如下：1.选择单</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lck8.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/16.webp" alt="华硕电脑图|华硕电脑图标怎么自由位置" /></span></a></p> <div class="title"> <h2><a href="/zs/Lck8.html" title="华硕电脑图|华硕电脑图标怎么自由位置">华硕电脑图|华硕电脑图标怎么自由位置</a></h2> </div> <p class="text-muted meta">华硕电脑图|华硕电脑图标怎么自由位置，，华硕电脑图标怎么自由位置工具/原料 华硕电脑 方法/步骤 1、首先，打开”控制面板“，依次点击”所有</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lck2.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/34.webp" alt="如何在电脑中批量修改相片像素|如何在电脑中批量修改相片像素格式" /></span></a></p> <div class="title"> <h2><a href="/zs/Lck2.html" title="如何在电脑中批量修改相片像素|如何在电脑中批量修改相片像素格式">如何在电脑中批量修改相片像素|如何在电脑</a></h2> </div> <p class="text-muted meta">如何在电脑中批量修改相片像素|如何在电脑中批量修改相片像素格式，，1. 如何在电脑中批量修改相片像素格式以我用的PhoteshopCS5为例，步骤如</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcjo.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/73.webp" alt="如何设置电脑桌面图标位置|怎么调电脑桌面图标位置" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcjo.html" title="如何设置电脑桌面图标位置|怎么调电脑桌面图标位置">如何设置电脑桌面图标位置|怎么调电脑桌面</a></h2> </div> <p class="text-muted meta">如何设置电脑桌面图标位置|怎么调电脑桌面图标位置，，1. 怎么调电脑桌面图标位置win11把计算机图标放在桌面的方法∶1.在电脑桌面，点击鼠标</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcfa.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/46.webp" alt="垃圾箱设置|垃圾箱设置位置基本原则" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcfa.html" title="垃圾箱设置|垃圾箱设置位置基本原则">垃圾箱设置|垃圾箱设置位置基本原则</a></h2> </div> <p class="text-muted meta">垃圾箱设置|垃圾箱设置位置基本原则，，1. 垃圾箱设置位置基本原则现在市面上垃圾桶的尺寸各式各样，相信很多人没有经验的人都会有选择困难症</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lcaz.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/59.webp" alt="电脑主机独立显卡位置插口|电脑主机独立显卡位置插口在哪" /></span></a></p> <div class="title"> <h2><a href="/zs/Lcaz.html" title="电脑主机独立显卡位置插口|电脑主机独立显卡位置插口在哪">电脑主机独立显卡位置插口|电脑主机独立显</a></h2> </div> <p class="text-muted meta">电脑主机独立显卡位置插口|电脑主机独立显卡位置插口在哪，，1. 电脑主机独立显卡位置插口在哪　　在主板上面，一般是最长的插槽。图中的黄色</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbYg.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/5.webp" alt="电脑桌面位置|电脑桌面位置调整到别的盘怎么调回来" /></span></a></p> <div class="title"> <h2><a href="/zs/LbYg.html" title="电脑桌面位置|电脑桌面位置调整到别的盘怎么调回来">电脑桌面位置|电脑桌面位置调整到别的盘怎</a></h2> </div> <p class="text-muted meta">电脑桌面位置|电脑桌面位置调整到别的盘怎么调回来，，电脑桌面位置调整到别的盘怎么调回来先在其它盘新建一个桌面文件夹，然后打开此电脑，右</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbWO.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/24.webp" alt="台式电脑的cpu在哪|台式电脑cpu在哪个位置" /></span></a></p> <div class="title"> <h2><a href="/zs/LbWO.html" title="台式电脑的cpu在哪|台式电脑cpu在哪个位置">台式电脑的cpu在哪|台式电脑cpu在哪个位置</a></h2> </div> <p class="text-muted meta">台式电脑的cpu在哪|台式电脑cpu在哪个位置，，台式电脑cpu在哪个位置电脑主机的内存条在主板上，一打开主机的侧盖，看到有一个长方形的板子，上面</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbSI.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/48.webp" alt="电脑主板上南北桥芯片位置|电脑主板上南北桥芯片位置怎么看" /></span></a></p> <div class="title"> <h2><a href="/zs/LbSI.html" title="电脑主板上南北桥芯片位置|电脑主板上南北桥芯片位置怎么看">电脑主板上南北桥芯片位置|电脑主板上南北</a></h2> </div> <p class="text-muted meta">电脑主板上南北桥芯片位置|电脑主板上南北桥芯片位置怎么看，，电脑主板上南北桥芯片位置怎么看1、查看主板说明书，纸质或网上找的电子版的，会</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbIM.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030503/iqv0wtun2xa34.webp" alt="wps里方块打勾|手机wps中在方框中打勾" /></span></a></p> <div class="title"> <h2><a href="/zs/LbIM.html" title="wps里方块打勾|手机wps中在方框中打勾">wps里方块打勾|手机wps中在方框中打勾</a></h2> </div> <p class="text-muted meta">wps里方块打勾|手机wps中在方框中打勾，方块,wps，1.手机wps中怎么在方框中打勾具体操作步骤如下：1、点击打开手机中的WPS软件，在软件中打开需</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/LbGK.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/51.webp" alt="ae改变缓存位置|ae缓存文件默认在哪" /></span></a></p> <div class="title"> <h2><a href="/zs/LbGK.html" title="ae改变缓存位置|ae缓存文件默认在哪">ae改变缓存位置|ae缓存文件默认在哪</a></h2> </div> <p class="text-muted meta">ae改变缓存位置|ae缓存文件默认在哪，，ae改变缓存位置不会。因为渲染时 CPU 需要读取的是你各个素材的原本的位置的文件。而磁盘缓存只是一</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lb7i.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030503/1by30sb5nwg25.webp" alt="wps把小写字母改为大写|WPS文本中能把所有字母全部变成大写" /></span></a></p> <div class="title"> <h2><a href="/zs/Lb7i.html" title="wps把小写字母改为大写|WPS文本中能把所有字母全部变成大写">wps把小写字母改为大写|WPS文本中能把所有</a></h2> </div> <p class="text-muted meta">wps把小写字母改为大写|WPS文本中能把所有字母全部变成大写，改为,字母,wps，1.WPS文本中怎样能把所有字母全部变成大写1、首先在电脑桌面上</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lb5F.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/95.webp" alt="ae只显示位置快捷键|ae只显示有操作的项快捷键" /></span></a></p> <div class="title"> <h2><a href="/zs/Lb5F.html" title="ae只显示位置快捷键|ae只显示有操作的项快捷键">ae只显示位置快捷键|ae只显示有操作的项快</a></h2> </div> <p class="text-muted meta">ae只显示位置快捷键|ae只显示有操作的项快捷键，，1. ae只显示有操作的项快捷键AE最上方的工具栏中第一个是选择工具，快捷键是V，这是用的最多</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lb5C.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/51.webp" alt="09款奇瑞风云2发动机电脑图片|奇瑞风云2发动机号位置图" /></span></a></p> <div class="title"> <h2><a href="/zs/Lb5C.html" title="09款奇瑞风云2发动机电脑图片|奇瑞风云2发动机号位置图">09款奇瑞风云2发动机电脑图片|奇瑞风云2发</a></h2> </div> <p class="text-muted meta">09款奇瑞风云2发动机电脑图片|奇瑞风云2发动机号位置图，，奇瑞风云2发动机号位置图发动机号码一般是印在发动机上方或者侧面，不会在车身，所以</p> </article></ul> </div> </div> </div> </div> </div> <footer class="footer"> <p>Copyright © 2023 易知道 ezd.cc All Rights Reserved</p> <p><a href="https://beian.miit.gov.cn/">京ICP备19020253号-3</a></p> </footer> </body> </html>