我怎样才能得到一个contenteditable html元素的游标行号？

我需要获取光标在其中的行号，或者更好的光标在可控元件中的偏移量。我怎样才能得到一个contenteditable html元素的游标行号？

我该如何做到这一点？

2012-02-21 Thariama

请添加例如HTML''的 – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/22470/">powtac</a></span> <span>2012-02-21 17:57:05</span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+2</span></div> <div class="col-lg-11"> <p class="commenttext">可能重复[如何得到光标位置textarea？]（http://stackoverflow.com/questions/263743/how-to-get-cursor-position-in-textarea） – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/783175/">FishBasketGordo</a></span> <span>2012-02-21 17:57:19</span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+2</span></div> <div class="col-lg-11"> <p class="commenttext">请问一个新的问题，而不是重大改变上下文。 – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/1048572/">Bergi</a></span> <span>2012-02-21 18:03:47</span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="answer-title"> <span class="text-logo margin-top-sm">A</span> <h2 class="title h4">回答</h2> </div> <div class="item-description text-md markdown-body margin-bottom-40 voidso"> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">0<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>这是我关于这个主题的一个较老的工具。</p> <pre><code class="prettyprint-override">/** * @description This operation splits the content of a text area based on its cursor position * and selection. * @param targetNode This argument expects the text node to be split. * @return This operation returns an object containing {first, middle, last}. */ var splitTextAreaBySelection = function(targetNode) { var target = document.getElementById('Area_'+targetNode.uid); var response = {}; // IE fails this DOM3 operation. Use IE proprietary code here to recover. // WARNING: This proprietary IE code has Win32 platform dependency! if (typeof(target.selectionStart) === "undefined") { var content = targetNode.content; // this captures the area selected text. var r = document.selection.createRange(); if (r !== null) { // thankfully the middle is easy to get! response.middle = r.text; // now we must create a new text range and mess with it until the cursor position can be discovered. var re = target.createTextRange(); var rc = re.duplicate(); re.moveToBookmark(r.getBookmark()); rc.setEndPoint('EndToStart', re); var cursorPos = rc.text.length; // now that we have the cursor position, we can abstract the first and last strings from the content. response.first = content.substr(0,cursorPos); response.last = content.substr(cursorPos + response.middle.length); } else { response.first = content; } } else { response.first = target.value.substring(0,target.selectionStart); response.middle = arget.value.substring(target.selectionStart, target.selectionEnd); response.last = target.value.substring(target.selectionEnd, target.textLength); } return response; }; </code></pre> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/9382688">来源</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2012-02-21 18:02:14</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">好吧，我的可信元素是iframe（rte）的主体。不幸的是，这段代码没有字 – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/346063/">Thariama</a></span> <span>2012-02-22 08:35:46</span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4319274062" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">1<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>我找到了解决我的问题的方法，但只有在所有行的行高都相同的情况下才有效。这个想法是在插入符号位置插入一个虚拟元素，计算相对于body start的位置，然后将该值除以行高。结果是行号的插入符是</p> <p>这里是一些代码开始使用。</p> <pre><code class="prettyprint-override"> // get lineheight, eighter line-height or min-height var $elem = $(ed.getBody().firstElementChild); var lineHeight = parseInt($elem.css('line-height'), 10) || parseInt($elem.css('min-height'), 10); var rng = ed.selection.getRng(); rng.collapse(true); var bm = ed.selection.getBookmark(); var $marker = $(ed.getBody()).find('#'+bm.id); var elem = ed.getDoc().getElementById(bm.id+'_start'); try { box = elem.getBoundingClientRect(); } catch(e){} var doc = ed.getDoc(), docElem = doc.documentElement, body = ed.getBody(), win = ed.getWin(), clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop, scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft, top = box.top + scrollTop - clientTop, left = box.left + scrollLeft - clientLeft; // set Bookmark ed.selection.moveToBookmark(bm); var caret_line = Math.floor((top)/lineHeight) + 1; </code></pre> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/20662217">来源</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2013-12-18 15:35:04</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/346063/">Thariama</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">感谢分享！ – <span class="text-secondary"> <small> <span>2013-12-18 16:29:43</span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">相关问题</div> <ul class="relative_list"> <li> 1. <a href="http://cn.voidcc.com/question/p-eubbzaky-nt.html" target="_blank" title="我怎样才能得到一个CONTENTEDITABLE <button>"> 我怎样才能得到一个CONTENTEDITABLE <button> </a> </li> <li> 2. <a href="http://cn.voidcc.com/question/p-ggxjcisp-bo.html" target="_blank" title="我怎样才能得到每个sap.m.select元素的行值"> 我怎样才能得到每个sap.m.select元素的行值 </a> </li> <li> 3. <a href="http://cn.voidcc.com/question/p-hwreygtc-ed.html" target="_blank" title="我怎样才能得到一个TD"> 我怎样才能得到一个TD </a> </li> <li> 4. <a href="http://cn.voidcc.com/question/p-hisuqguh-kp.html" target="_blank" title="我怎样才能得到一个HTML元素的属性在JavaScript/jQuery的"> 我怎样才能得到一个HTML元素的属性在JavaScript/jQuery的 </a> </li> <li> 5. <a href="http://cn.voidcc.com/question/p-posehlko-gp.html" target="_blank" title="我怎样才能得到"> 我怎样才能得到 </a> </li> <li> 6. <a href="http://cn.voidcc.com/question/p-xzfnosbq-qh.html" target="_blank" title="我怎样才能得到JSON格式的游标输出？"> 我怎样才能得到JSON格式的游标输出？ </a> </li> <li> 7. <a href="http://cn.voidcc.com/question/p-etvtavqf-nx.html" target="_blank" title="我怎样才能得到一个适当的素描照片？"> 我怎样才能得到一个适当的素描照片？ </a> </li> <li> 8. <a href="http://cn.voidcc.com/question/p-ftxjptpx-ku.html" target="_blank" title="我怎样才能得到watir中隐藏元素的文字"> 我怎样才能得到watir中隐藏元素的文字 </a> </li> <li> 9. <a href="http://cn.voidcc.com/question/p-gyfejygy-hg.html" target="_blank" title="我怎样才能得到HTML图像标签android？"> 我怎样才能得到HTML图像标签android？ </a> </li> <li> 10. <a href="http://cn.voidcc.com/question/p-wgcukcuk-kp.html" target="_blank" title="我怎样才能得到一个JSON像这样用JavaScript"> 我怎样才能得到一个JSON像这样用JavaScript </a> </li> <li> 11. <a href="http://cn.voidcc.com/question/p-fbtlniap-da.html" target="_blank" title="我怎样才能得到android"> 我怎样才能得到android </a> </li> <li> 12. <a href="http://cn.voidcc.com/question/p-vdviknbj-dz.html" target="_blank" title="我怎样才能看到每一行？"> 我怎样才能看到每一行？ </a> </li> <li> 13. <a href="http://cn.voidcc.com/question/p-ytuvgwwg-ed.html" target="_blank" title="我怎样才能在一个XML Schema"> 我怎样才能在一个XML Schema </a> </li> <li> 14. <a href="http://cn.voidcc.com/question/p-encxsoss-ny.html" target="_blank" title="我怎样才能得到statechange"> 我怎样才能得到statechange </a> </li> <li> 15. <a href="http://cn.voidcc.com/question/p-eyhwhinz-ec.html" target="_blank" title="C＃：我怎样才能得到某个文件的图标？"> C＃：我怎样才能得到某个文件的图标？ </a> </li> <li> 16. <a href="http://cn.voidcc.com/question/p-btaccydz-pp.html" target="_blank" title="我怎样才能找到一个DataTable"> 我怎样才能找到一个DataTable </a> </li> <li> 17. <a href="http://cn.voidcc.com/question/p-bifmoqyi-tt.html" target="_blank" title="我怎样才能找到这个元素与硒webdriver？"> 我怎样才能找到这个元素与硒webdriver？ </a> </li> <li> 18. <a href="http://cn.voidcc.com/question/p-ecytfwpi-cx.html" target="_blank" title="我怎样才能得到父组件"> 我怎样才能得到父组件 </a> </li> <li> 19. <a href="http://cn.voidcc.com/question/p-xyzkchzg-bk.html" target="_blank" title="我怎样才能得到Parsley.js"> 我怎样才能得到Parsley.js </a> </li> <li> 20. <a href="http://cn.voidcc.com/question/p-mhqqhajz-pr.html" target="_blank" title="我怎样才能得到djangocms"> 我怎样才能得到djangocms </a> </li> <li> 21. <a href="http://cn.voidcc.com/question/p-cseewkke-cz.html" target="_blank" title="我怎样才能得到屏幕-Android"> 我怎样才能得到屏幕-Android </a> </li> <li> 22. <a href="http://cn.voidcc.com/question/p-thuanhjq-rp.html" target="_blank" title="我怎样才能得到NSScrollView尊重"> 我怎样才能得到NSScrollView尊重 </a> </li> <li> 23. <a href="http://cn.voidcc.com/question/p-zvkfyljf-nb.html" target="_blank" title="我怎样才能得到用户"> 我怎样才能得到用户 </a> </li> <li> 24. <a href="http://cn.voidcc.com/question/p-frmfjjps-ek.html" target="_blank" title="我怎样才能得到一个名为的MessagingService类的Java"> 我怎样才能得到一个名为的MessagingService类的Java </a> </li> <li> 25. <a href="http://cn.voidcc.com/question/p-tuebisbn-no.html" target="_blank" title="我怎样才能让这只有一个元素？"> 我怎样才能让这只有一个元素？ </a> </li> <li> 26. <a href="http://cn.voidcc.com/question/p-vskrsiel-nw.html" target="_blank" title="我怎样才能从一个deque中弹出（）很多元素？"> 我怎样才能从一个deque中弹出（）很多元素？ </a> </li> <li> 27. <a href="http://cn.voidcc.com/question/p-fxguyxwi-mz.html" target="_blank" title="我怎样才能给JavaScript元素一个CSS类？"> 我怎样才能给JavaScript元素一个CSS类？ </a> </li> <li> 28. <a href="http://cn.voidcc.com/question/p-axgjtset-ns.html" target="_blank" title="jquery：我怎样才能让一个数字元素可折叠？"> jquery：我怎样才能让一个数字元素可折叠？ </a> </li> <li> 29. <a href="http://cn.voidcc.com/question/p-tjkviapv-bh.html" target="_blank" title="我怎样才能得到这个标题"> 我怎样才能得到这个标题 </a> </li> <li> 30. <a href="http://cn.voidcc.com/question/p-gtbykxvf-ez.html" target="_blank" title="我怎样才能标签"> 我怎样才能标签 </a> </li> </ul> </div> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515421853"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> 每日一句 </div> <div class="panel-body m-b-sm m-t-sm clearfix"> 每一个你不满意的现在，都有一个你没有努力的曾经。 </div> </div> <div class="row"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> 最新问题 </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://cn.voidcc.com/question/p-pzzmrfxq-nq.html" target="_blank" title="WPF - STA要求vs服务器端使用"> WPF - STA要求vs服务器端使用 </a> </li> <li class="side_article_list_item"> 2. <a href="http://cn.voidcc.com/question/p-gndxhmlm-nz.html" target="_blank" title="如何为本地C++创建nuget包"> 如何为本地C++创建nuget包 </a> </li> <li class="side_article_list_item"> 3. <a href="http://cn.voidcc.com/question/p-rmpiwedn-tt.html" target="_blank" title="TensorFlow - 恢复（如果存在）"> TensorFlow - 恢复（如果存在） </a> </li> <li class="side_article_list_item"> 4. <a href="http://cn.voidcc.com/question/p-gpxzwddv-tu.html" target="_blank" title="阿帕奇气流1.9从GitHub"> 阿帕奇气流1.9从GitHub </a> </li> <li class="side_article_list_item"> 5. <a href="http://cn.voidcc.com/question/p-mymjdzco-ts.html" target="_blank" title="在add_custom_command中连接多个文件"> 在add_custom_command中连接多个文件 </a> </li> <li class="side_article_list_item"> 6. <a href="http://cn.voidcc.com/question/p-bwatuhvk-tt.html" target="_blank" title="Laravel 5/Form安全（需要澄清）"> Laravel 5/Form安全（需要澄清） </a> </li> <li class="side_article_list_item"> 7. <a href="http://cn.voidcc.com/question/p-akeulwdk-tr.html" target="_blank" title="如何用虚假来表示可空值？"> 如何用虚假来表示可空值？ </a> </li> <li class="side_article_list_item"> 8. <a href="http://cn.voidcc.com/question/p-ewtzclzh-ne.html" target="_blank" title="perl排名带/平的数字"> perl排名带/平的数字 </a> </li> <li class="side_article_list_item"> 9. <a href="http://cn.voidcc.com/question/p-xjjkltdu-ok.html" target="_blank" title="jQuery的形式提交与sucess和错误消息"> jQuery的形式提交与sucess和错误消息 </a> </li> <li class="side_article_list_item"> 10. <a href="http://cn.voidcc.com/question/p-qxvparsh-mm.html" target="_blank" title="Asterisk的应答机检测"> Asterisk的应答机检测 </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> 相关问题</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://cn.voidcc.com/question/p-eubbzaky-nt.html" target="_blank" title="我怎样才能得到一个CONTENTEDITABLE <button>"> 我怎样才能得到一个CONTENTEDITABLE <button> </a> </li> <li class="side_article_list_item"> 2. <a href="http://cn.voidcc.com/question/p-ggxjcisp-bo.html" target="_blank" title="我怎样才能得到每个sap.m.select元素的行值"> 我怎样才能得到每个sap.m.select元素的行值 </a> </li> <li class="side_article_list_item"> 3. <a href="http://cn.voidcc.com/question/p-hwreygtc-ed.html" target="_blank" title="我怎样才能得到一个TD"> 我怎样才能得到一个TD </a> </li> <li class="side_article_list_item"> 4. <a href="http://cn.voidcc.com/question/p-hisuqguh-kp.html" target="_blank" title="我怎样才能得到一个HTML元素的属性在JavaScript/jQuery的"> 我怎样才能得到一个HTML元素的属性在JavaScript/jQuery的 </a> </li> <li class="side_article_list_item"> 5. <a href="http://cn.voidcc.com/question/p-posehlko-gp.html" target="_blank" title="我怎样才能得到"> 我怎样才能得到 </a> </li> <li class="side_article_list_item"> 6. <a href="http://cn.voidcc.com/question/p-xzfnosbq-qh.html" target="_blank" title="我怎样才能得到JSON格式的游标输出？"> 我怎样才能得到JSON格式的游标输出？ </a> </li> <li class="side_article_list_item"> 7. <a href="http://cn.voidcc.com/question/p-etvtavqf-nx.html" target="_blank" title="我怎样才能得到一个适当的素描照片？"> 我怎样才能得到一个适当的素描照片？ </a> </li> <li class="side_article_list_item"> 8. <a href="http://cn.voidcc.com/question/p-ftxjptpx-ku.html" target="_blank" title="我怎样才能得到watir中隐藏元素的文字"> 我怎样才能得到watir中隐藏元素的文字 </a> </li> <li class="side_article_list_item"> 9. <a href="http://cn.voidcc.com/question/p-gyfejygy-hg.html" target="_blank" title="我怎样才能得到HTML图像标签android？"> 我怎样才能得到HTML图像标签android？ </a> </li> <li class="side_article_list_item"> 10. <a href="http://cn.voidcc.com/question/p-wgcukcuk-kp.html" target="_blank" title="我怎样才能得到一个JSON像这样用JavaScript"> 我怎样才能得到一个JSON像这样用JavaScript </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://cn.voidcc.com/contact">联系我们</a></li> <li>© 2020 CN.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>