如何从一开始就以字符为单位获取文本区域中插入符号列(而不是像素)的位置? [英] How to get the caret column (not pixels) position in a textarea, in characters, from the start?

问题描述

如何使用 JavaScript 在 </code> 中获取插入符号位置?<em class="showen"></em></p> <p class="en">How do you get the caret position in a <code><textarea></code> using JavaScript?</p> <p class="cn">例如:<code>这是|一段文字</code></p> <p class="cn">这应该返回 <code>7</code>.</p> <p class="cn">如何让它返回光标/选择周围的字符串?<em class="showen"></em></p> <p class="en">How would you get it to return the strings surrounding the cursor / selection?</p> <p class="cn">例如:<code>'This is', '', ' a text'</code>.</p> <p class="cn">如果突出显示单词is"，则返回<code>'This', 'is', 'a text'</code>.<em class="showen"></em></p> <p class="en">If the word "is" is highlighted, then it would return <code>'This ', 'is', ' a text'</code>.</p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">使用 Firefox、Safari(和其他基于 Gecko 的浏览器)您可以轻松使用 textarea.selectionStart，但对于 IE 不起作用，因此您必须做这样的事情:<em class="showen"></em></p> <p class="en">With Firefox, Safari (and other Gecko based browsers) you can easily use textarea.selectionStart, but for IE that doesn't work, so you will have to do something like this:</p> <pre><code><code>function getCaret(node) { if (node.selectionStart) { return node.selectionStart; } else if (!document.selection) { return 0; } var c = "�01", sel = document.selection.createRange(), dul = sel.duplicate(), len = 0; dul.moveToElementText(node); sel.text = c; len = dul.text.indexOf(c); sel.moveStart('character',-1); sel.text = ""; return len; } </code></code></pre> <p class="cn">(<a href="http://web.archive.org/web/20080214051356/http://www.csie.ntu.edu.tw/~b88039/html/jslib/caret.html" rel="noreferrer">完整代码在这里</a>)</p> <p class="cn">我还建议您检查 jQuery <a href="https://github.com/localhost/jquery-fieldselection" rel="noreferrer">FieldSelection</a> 插件，它允许您这样做并且更多...<em class="showen"></em></p> <p class="en">I also recommend you to check the jQuery FieldSelection Plugin, it allows you to do that and much more...</p> <p class="cn"><strong></strong>我实际上重新实现了上面的代码:<em class="showen"></em></p> <p class="en"><strong></strong> I actually re-implemented the above code: </p> <pre><code><code>function getCaret(el) { if (el.selectionStart) { return el.selectionStart; } else if (document.selection) { el.focus(); var r = document.selection.createRange(); if (r == null) { return 0; } var re = el.createTextRange(), rc = re.duplicate(); re.moveToBookmark(r.getBookmark()); rc.setEndPoint('EndToStart', re); return rc.text.length; } return 0; } </code></code></pre> <p class="cn">在<a href="http://jsbin.com/iwopa" rel="noreferrer">此处</a>查看示例.</p> <p>这篇关于如何从一开始就以字符为单位获取文本区域中插入符号列(而不是像素)的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2625463');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="如何从一开始就以字符形式在textarea中获取插入符号列（不是像素）的位置？" href="/1002573.html"> 如何从一开始就以字符形式在textarea中获取插入符号列（不是像素）的位置？; </a> </li> <li> <a target="_blank" title="获取插入符号在文本区域中的偏移位置（以像素为单位）" href="/1005595.html"> 获取插入符号在文本区域中的偏移位置（以像素为单位）; </a> </li> <li> <a target="_blank" title="Windows窗体：播放声音，而不是从一开始" href="/306481.html"> Windows窗体：播放声音，而不是从一开始; </a> </li> <li> <a target="_blank" title="在文本区域中获取插入符号XY坐标" href="/1016228.html"> 在文本区域中获取插入符号XY坐标; </a> </li> <li> <a target="_blank" title="PyQt 从一开始就跑槽" href="/2350786.html"> PyQt 从一开始就跑槽; </a> </li> <li> <a target="_blank" title="如何从一开始就创建WPF" href="/1458666.html"> 如何从一开始就创建WPF; </a> </li> <li> <a target="_blank" title="一开始位置是空的" href="/2617522.html"> 一开始位置是空的; </a> </li> <li> <a target="_blank" title="从插入符位置文本区域中提取文本" href="/2074185.html"> 从插入符位置文本区域中提取文本; </a> </li> <li> <a target="_blank" title="从一开始就设置IIS 7" href="/1403715.html"> 从一开始就设置IIS 7; </a> </li> <li> <a target="_blank" title="如何在HTML文本区域中找到光标位置（X / Y，而不是行/列）？" href="/590347.html"> 如何在HTML文本区域中找到光标位置（X / Y，而不是行/列）？; </a> </li> <li> <a target="_blank" title="如何在当前光标位置的文本区域中插入文本?" href="/2147194.html"> 如何在当前光标位置的文本区域中插入文本?; </a> </li> <li> <a target="_blank" title="文本区域中的光标位置(字符索引，不是x/y坐标)" href="/1479796.html"> 文本区域中的光标位置(字符索引，不是x/y坐标); </a> </li> <li> <a target="_blank" title="在文本区域中的光标位置之后插入文本" href="/1010251.html"> 在文本区域中的光标位置之后插入文本; </a> </li> <li> <a target="_blank" title="在输入类型文本（不是textarea）中以像素为单位的插入符号位置" href="/862075.html"> 在输入类型文本（不是textarea）中以像素为单位的插入符号位置; </a> </li> <li> <a target="_blank" title="如何获得SCEditor文本区域中的当前插入符位置?" href="/1837890.html"> 如何获得SCEditor文本区域中的当前插入符位置?; </a> </li> <li> <a target="_blank" title="如何从一开始就重新提交所有提交" href="/800935.html"> 如何从一开始就重新提交所有提交; </a> </li> <li> <a target="_blank" title="如何从一开始就逐步执行R脚本？" href="/2039048.html"> 如何从一开始就逐步执行R脚本？; </a> </li> <li> <a target="_blank" title="jQuery从一开始就循环播放动画" href="/1499307.html"> jQuery从一开始就循环播放动画; </a> </li> <li> <a target="_blank" title="从一开始就在线设计网站" href="/1430497.html"> 从一开始就在线设计网站; </a> </li> <li> <a target="_blank" title="XHR上传进度从一开始就是100％" href="/2165152.html"> XHR上传进度从一开始就是100％; </a> </li> <li> <a target="_blank" title="如何使DataReader从一开始就再次开始读取条件？" href="/444920.html"> 如何使DataReader从一开始就再次开始读取条件？; </a> </li> <li> <a target="_blank" title="如何获取文本区域中的选择的开始和结束点？" href="/590184.html"> 如何获取文本区域中的选择的开始和结束点？; </a> </li> <li> <a target="_blank" title="哪些编程语言从一开始就设计为支持 Unicode?" href="/2799914.html"> 哪些编程语言从一开始就设计为支持 Unicode?; </a> </li> <li> <a target="_blank" title="在文本区域中设置文本光标位置" href="/2284506.html"> 在文本区域中设置文本光标位置; </a> </li> <li> <a target="_blank" title="iOS 11 位置权限，从一开始就有三个选项" href="/2366686.html"> iOS 11 位置权限，从一开始就有三个选项; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '如何,从一,开始,就以,字符,为,单位,获取,文本,区,域中,插入,符号,列,而,不是,像素,的,位置'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>