13赞

如何从一开始就以字符形式在textarea中获取插入符号列(不是像素)的位置？

作者：mobiledu2402851173 | 2023-09-03 11:52

如何解决《如何从一开始就以字符形式在textarea中获取插入符号列(不是像素)的位置？》经验，为你挑选了2个好方法。

如何在</code>使用JavaScript中获得插入位置？</p> <p>例如: <code>This is| a text</code></p> <p>这应该回来了<code>7</code>.</p> <p>如何让它返回光标/选择周围的字符串？</p> <p>例如:<code>'This is', '', ' a text'</code>.</p> <p>如果突出显示"是"一词,那么它将返回<code>'This ', 'is', ' a text'</code>.</p><br><br><b>1> CMS..：</b><hr><p>使用Firefox,Safari(以及其他基于Gecko的浏览器),您可以轻松使用textarea.selectionStart,但对于不起作用的IE,您必须执行以下操作:</p> <pre class="brush:bash;">function getCaret(node) { if (node.selectionStart) { return node.selectionStart; } else if (!document.selection) { return 0; } var c = "\001", 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; } </pre> <p>(这里完整代码)</p> <p>我还建议你检查jQuery FieldSelection插件,它允许你这样做以及更多......</p> <p><strong>编辑:</strong>我实际上重新实现了上面的代码:</p> <pre class="brush:bash;">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; } </pre> <p>点击这里查看示例.</p></p> <hr>如何在CONTENTEDITABLE div中使用它？ <hr>这个答案不涉及空行问题. <br><br><b>2> Tim Down..：</b><hr><p><strong>2010年9月5日更新</strong></p> <p>看到每个人似乎都在这里针对这个问题,我将我的答案添加到一个类似的问题,其中包含与此答案相同的代码,但对于那些感兴趣的人有完整的背景:</p> <p>IE的document.selection.createRange不包括前导或尾随空行</p> <p>在IE中考虑尾随换行是很棘手的,我没有看到任何正确执行此操作的解决方案,包括此问题的任何其他答案.但是,可以使用以下函数,它将返回一个<code><textarea></code>或一个文本中选择的开始和结束(在插入符号的情况下是相同的)<code><input></code>.</p> <p>请注意,textarea必须具有焦点才能使此功能在IE中正常工作.如有疑问,<code>focus()</code>请先调用textarea的方法.</p> <pre class="brush:bash;">function getInputSelection(el) { var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working TextRange that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since moveStart/moveEnd doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; } </pre></p> <hr>@Misha:这不是函数的错:这是函数执行时实际选择的内容.在解除警报框后,您可以直观地看到它.正如我在回答你最近的问题时提到的,两个可能的解决方法是使用`mousedown`事件或在``<div>`元素上添加``unselectable =". </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/Zai_-----_ZhongC_164d6656.html" target="_blank" title="在[...]中出乎意料的'''">在[...]中出乎意料的'''</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在[]中出乎意料的'''》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zai_-----_ZhongC_164d6656.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/ChuFaQiZaiBeiTon_0b173423.html" target="_blank" title="触发器在被同一表激发后无法读取该表">触发器在被同一表激发后无法读取该表</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《触发器在被同一表激发后无法读取该表》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ChuFaQiZaiBeiTon_0b173423.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/GenJuDingDanZhon_2a30dff0.html" target="_blank" title="根据订单中的值过滤列表？">根据订单中的值过滤列表？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《根据订单中的值过滤列表？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/GenJuDingDanZhon_2a30dff0.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/GoLang_DeJieGou_5aa522ba.html" target="_blank" title="GoLang的结构">GoLang的结构</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《GoLang的结构》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/GoLang_DeJieGou_5aa522ba.html" target="_blank" title="GoLang的结构">[详细]</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/ShiYong_toInt_Ha_6cf046c3.html" target="_blank" title="使用toInt函数的字符串到int转换">使用toInt函数的字符串到int转换</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《使用toInt函数的字符串到int转换》经验，为你挑选了3个好方法。 ... <a href="https://devbox.cn/p/ShiYong_toInt_Ha_6cf046c3.html" target="_blank" title="使用toInt函数的字符串到int转换">[详细]</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/ZaiMouXieTiaoJia_f20114fe.html" target="_blank" title="在某些条件下非常奇怪的代码,包括优化">在某些条件下非常奇怪的代码,包括优化</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在某些条件下非常奇怪的代码,包括优化》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ZaiMouXieTiaoJia_f20114fe.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/ZenMeBuShiBangSh_a964ef98.html" target="_blank" title="怎么不是帮手？">怎么不是帮手？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《怎么不是帮手？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ZenMeBuShiBangSh_a964ef98.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/RuHeShiYong_AWSC_38bb128a.html" target="_blank" title="如何使用AWS CLI创建AWS Lambda函数？">如何使用AWS CLI创建AWS Lambda函数？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何使用AWSCLI创建AWSLambda函数？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeShiYong_AWSC_38bb128a.html" target="_blank" title="如何使用AWS CLI创建AWS Lambda函数？">[详细]</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/Webpackdev_FuWuQ_d6cf599a.html" target="_blank" title="Webpack dev服务器缓慢初始加载">Webpack dev服务器缓慢初始加载</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Webpackdev服务器缓慢初始加载》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Webpackdev_FuWuQ_d6cf599a.html" target="_blank" title="Webpack dev服务器缓慢初始加载">[详细]</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/ZaiZhiJieShengMi_44dc18cc.html" target="_blank" title="在直接声明的HTML事件标记中获取事件对象">在直接声明的HTML事件标记中获取事件对象</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在直接声明的HTML事件标记中获取事件对象》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ZaiZhiJieShengMi_44dc18cc.html" target="_blank" title="在直接声明的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/RuHeTongGuoTeShu_2c9cf263.html" target="_blank" title="如何通过特殊字符串在javascript中拆分字符串">如何通过特殊字符串在javascript中拆分字符串</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何通过特殊字符串在javascript中拆分字符串》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeTongGuoTeShu_2c9cf263.html" target="_blank" title="如何通过特殊字符串在javascript中拆分字符串">[详细]</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/JuYouZiYuanSuoYo_922f1570.html" target="_blank" title="具有资源所有者密码凭证和JWT的Spring Security OAuth2客户端SSO">具有资源所有者密码凭证和JWT的Spring Security OAuth2客户端SSO</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《具有资源所有者密码凭证和JWT的SpringSecurityOAuth2客户端SSO》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/JuYouZiYuanSuoYo_922f1570.html" target="_blank" title="具有资源所有者密码凭证和JWT的Spring Security OAuth2客户端SSO">[详细]</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_LocalFolder__e69c755a.html" target="_blank" title="在LocalFolder中存储BitmapImage - UWP">在LocalFolder中存储BitmapImage - UWP</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在LocalFolder中存储BitmapImage-UWP》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zai_LocalFolder__e69c755a.html" target="_blank" title="在LocalFolder中存储BitmapImage - UWP">[详细]</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/CuoWu_-_JiangYiS_ec2945aa.html" target="_blank" title="错误:将已删除的函数'test :: test(const test&)C++与向量结合使用">错误:将已删除的函数'test :: test(const test&)C++与向量结合使用</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《错误:将已删除的函数'test::test(consttest&)C++与向量结合使用》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/CuoWu_-_JiangYiS_ec2945aa.html" target="_blank" title="错误:将已删除的函数'test :: test(const test&)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/ShiYong_Boost-Lo_3445c739.html" target="_blank" title="使用Boost.Log的通道层次结构进行严重性和接收过滤">使用Boost.Log的通道层次结构进行严重性和接收过滤</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《使用Boost.Log的通道层次结构进行严重性和接收过滤》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ShiYong_Boost-Lo_3445c739.html" target="_blank" title="使用Boost.Log的通道层次结构进行严重性和接收过滤">[详细]</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/PropTypes_ShiYon_e5bdb48f.html" target="_blank" title="PropTypes使用动态键检查对象">PropTypes使用动态键检查对象</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《PropTypes使用动态键检查对象》经验，为你挑选了3个好方法。 ... <a href="https://devbox.cn/p/PropTypes_ShiYon_e5bdb48f.html" target="_blank" title="PropTypes使用动态键检查对象">[详细]</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/RuHeShanChu_Micr_73181892.html" target="_blank" title="如何删除Microsoft Azure存储中的租用blob">如何删除Microsoft Azure存储中的租用blob</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/RuHeShanChu_Micr_73181892.html" target="_blank" title="如何删除Microsoft Azure存储中的租用blob"><img src="https://img.devbox.cn/3cccf/16086/243/0ee42a7fd2ff01cd.png" width="120" height="70" alt="如何删除Microsoft Azure存储中的租用blob"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《如何删除MicrosoftAzure存储中的租用blob》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeShanChu_Micr_73181892.html" target="_blank" title="如何删除Microsoft Azure存储中的租用blob">[详细]</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/RuHeZai_Python_Z_eab4330c.html" target="_blank" title="如何在Python中使用OpenCV Stitcher类？">如何在Python中使用OpenCV Stitcher类？</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/RuHeZai_Python_Z_eab4330c.html" target="_blank" title="如何在Python中使用OpenCV Stitcher类？"><img src="https://img.devbox.cn/3cccf/16086/243/01d99e3f02db9d45.png" width="120" height="70" alt="如何在Python中使用OpenCV Stitcher类？"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《如何在Python中使用OpenCVStitcher类？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeZai_Python_Z_eab4330c.html" target="_blank" title="如何在Python中使用OpenCV Stitcher类？">[详细]</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/DangYongHuZai_wp_9e22250b.html" target="_blank" title="当用户在wpf中悬停时,我如何突出显示行？">当用户在wpf中悬停时,我如何突出显示行？</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/DangYongHuZai_wp_9e22250b.html" target="_blank" title="当用户在wpf中悬停时,我如何突出显示行？"><img src="https://img.devbox.cn/3cccf/16086/243/4252a71e1dc6e95e.png" width="120" height="70" alt="当用户在wpf中悬停时,我如何突出显示行？"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《当用户在wpf中悬停时,我如何突出显示行？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/DangYongHuZai_wp_9e22250b.html" target="_blank" title="当用户在wpf中悬停时,我如何突出显示行？">[详细]</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/InnerHTML_WuFaZh_2b2021d2.html" target="_blank" title="InnerHTML无法正常工作">InnerHTML无法正常工作</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《InnerHTML无法正常工作》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/InnerHTML_WuFaZh_2b2021d2.html" target="_blank" title="InnerHTML无法正常工作">[详细]</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" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册