2赞

如何从一开始就以字符形式在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_R_ZhongSuiJi_7dd26046.html" target="_blank" title="在R中随机抽样数据帧为3组">在R中随机抽样数据帧为3组</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在R中随机抽样数据帧为3组》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zai_R_ZhongSuiJi_7dd26046.html" target="_blank" title="在R中随机抽样数据帧为3组">[详细]</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/RuGuoBiaoWeiKong_ecb5e850.html" target="_blank" title="如果表为空,则CodeIgniter result_array()出现布尔错误">如果表为空,则CodeIgniter result_array()出现布尔错误</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如果表为空,则CodeIgniterresult_array()出现布尔错误》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuGuoBiaoWeiKong_ecb5e850.html" target="_blank" title="如果表为空,则CodeIgniter result_array()出现布尔错误">[详细]</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/TongGuoZiDongGuo_cf4b9790.html" target="_blank" title="通过自动过滤器删除时间过长">通过自动过滤器删除时间过长</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《通过自动过滤器删除时间过长》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/TongGuoZiDongGuo_cf4b9790.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/Powershell_BianH_f2eea7e1.html" target="_blank" title="Powershell编号排序">Powershell编号排序</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Powershell编号排序》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Powershell_BianH_f2eea7e1.html" target="_blank" title="Powershell编号排序">[详细]</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/ChaZhao_Recycler_b95eed28.html" target="_blank" title="查找RecyclerView中第一个可见项目的顶部偏移量">查找RecyclerView中第一个可见项目的顶部偏移量</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《查找RecyclerView中第一个可见项目的顶部偏移量》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ChaZhao_Recycler_b95eed28.html" target="_blank" title="查找RecyclerView中第一个可见项目的顶部偏移量">[详细]</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/Cygwin-MinGW_Zho_bcf49b46.html" target="_blank" title="Cygwin/MinGW中Git difftool的速度非常慢">Cygwin/MinGW中Git difftool的速度非常慢</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Cygwin/MinGW中Gitdifftool的速度非常慢》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Cygwin-MinGW_Zho_bcf49b46.html" target="_blank" title="Cygwin/MinGW中Git difftool的速度非常慢">[详细]</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/TiaoGuoWeiZhiXin_c7538f70.html" target="_blank" title="跳过未知行数来读取标题python pandas">跳过未知行数来读取标题python pandas</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《跳过未知行数来读取标题pythonpandas》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/TiaoGuoWeiZhiXin_c7538f70.html" target="_blank" title="跳过未知行数来读取标题python pandas">[详细]</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/ZhaoDao_--_PingH_1b9b76a9.html" target="_blank" title="找到"平衡"点的算法">找到"平衡"点的算法</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《找到"平衡"点的算法》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/ZhaoDao_--_PingH_1b9b76a9.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/DaiYou_Fabric_Hu_b96bf3a2.html" target="_blank" title="带有Fabric画布的FileSaver.js">带有Fabric画布的FileSaver.js</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《带有Fabric画布的FileSaver.js》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/DaiYou_Fabric_Hu_b96bf3a2.html" target="_blank" title="带有Fabric画布的FileSaver.js">[详细]</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/QueDing_Laravel5_05137f8e.html" target="_blank" title="确定Laravel 5中是否存在文件">确定Laravel 5中是否存在文件</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《确定Laravel5中是否存在文件》经验，为你挑选了4个好方法。 ... <a href="https://devbox.cn/p/QueDing_Laravel5_05137f8e.html" target="_blank" title="确定Laravel 5中是否存在文件">[详细]</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/C_ZiFuChuanFuZhi_512abe57.html" target="_blank" title="C字符串赋值给出了分段错误">C字符串赋值给出了分段错误</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《C字符串赋值给出了分段错误》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/C_ZiFuChuanFuZhi_512abe57.html" target="_blank" title="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/Firebase_AnZhuoG_12930d84.html" target="_blank" title="Firebase安卓工作室从FirebaseListAdapter中删除项目">Firebase安卓工作室从FirebaseListAdapter中删除项目</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Firebase安卓工作室从FirebaseListAdapter中删除项目》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Firebase_AnZhuoG_12930d84.html" target="_blank" title="Firebase安卓工作室从FirebaseListAdapter中删除项目">[详细]</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/ShiJianBiao_SQLP_d8efc262.html" target="_blank" title="时间表SQL Presto">时间表SQL Presto</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《时间表SQLPresto》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/ShiJianBiao_SQLP_d8efc262.html" target="_blank" title="时间表SQL Presto">[详细]</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/AnZhuang_VisualS_bb743d85.html" target="_blank" title="安装Visual Studio 2015 Update 1给了我很多:"包没有正确加载"">安装Visual Studio 2015 Update 1给了我很多:"包没有正确加载"</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/AnZhuang_VisualS_bb743d85.html" target="_blank" title="安装Visual Studio 2015 Update 1给了我很多:"包没有正确加载""><img src="https://img.devbox.cn/3cccf/16086/243/6db233c03a276edb.png" width="120" height="70" alt="安装Visual Studio 2015 Update 1给了我很多:"包没有正确加载""/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《安装VisualStudio2015Update1给了我很多:"包没有正确加载"》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/AnZhuang_VisualS_bb743d85.html" target="_blank" title="安装Visual Studio 2015 Update 1给了我很多:"包没有正确加载"">[详细]</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_jQue_44893525.html" target="_blank" title="如何使用jQuery获取特定的表单元素">如何使用jQuery获取特定的表单元素</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何使用jQuery获取特定的表单元素》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeShiYong_jQue_44893525.html" target="_blank" title="如何使用jQuery获取特定的表单元素">[详细]</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/Ng-animate_ShiYo_000b3d38.html" target="_blank" title="Ng-animate使用$ templateRequest装饰器停止工作">Ng-animate使用$ templateRequest装饰器停止工作</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Ng-animate使用$templateRequest装饰器停止工作》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Ng-animate_ShiYo_000b3d38.html" target="_blank" title="Ng-animate使用$ templateRequest装饰器停止工作">[详细]</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/YongYuXunHuanYou_122f2c3e.html" target="_blank" title="用于循环优化的Java">用于循环优化的Java</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《用于循环优化的Java》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/YongYuXunHuanYou_122f2c3e.html" target="_blank" title="用于循环优化的Java">[详细]</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/Angular_JiangYan_bc99fa50.html" target="_blank" title="Angular将样式应用于ngRepeat中的第一个可见项">Angular将样式应用于ngRepeat中的第一个可见项</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Angular将样式应用于ngRepeat中的第一个可见项》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Angular_JiangYan_bc99fa50.html" target="_blank" title="Angular将样式应用于ngRepeat中的第一个可见项">[详细]</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/XingHaoDeWeiZhiH_6bde08a5.html" target="_blank" title="星号的位置会影响指针吗？">星号的位置会影响指针吗？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《星号的位置会影响指针吗？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/XingHaoDeWeiZhiH_6bde08a5.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/Babelv6-_RuHe_-__5248193b.html" target="_blank" title="Babel v6:如何/我可以编写一个添加新语法的插件(即一个新的运算符)？">Babel v6:如何/我可以编写一个添加新语法的插件(即一个新的运算符)？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Babelv6:如何/我可以编写一个添加新语法的插件(即一个新的运算符)？》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Babelv6-_RuHe_-__5248193b.html" target="_blank" title="Babel v6:如何/我可以编写一个添加新语法的插件(即一个新的运算符)？">[详细]</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" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册