您的位置: 首页 > IT文章 > 【分享】 封装js操作textarea 方法集合(兼容很好)。 【分享】 封装js操作textarea 方法集合(兼容很好)。 分类: IT文章 • 2022-05-05 21:12:59 请使用下面的btn操作。 虽然你现在看来没什么用，当要用的时候又到处找资料，还不如现在收集一下。 </div> <p>在DOM里面操作textarea里面的字符，是比较麻烦的。</p> <p>于是我有这个封装分享给大家，测试过IE6,8, firefox ,chrome, opera , safari。兼容没问题。</p> <p>注意：在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0，当然解决了，但是不够完美。如果有高手也研究过，麻烦指点下。</p> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg==" alt="【分享】 封装js操作textarea 方法集合(兼容很好)。" title="【分享】 封装js操作textarea 方法集合(兼容很好)。"></a></span></div> <div>var TT = {<br><br> /*<br> * 获取光标位置<br> * @Method getCursorPosition<br> * @param t element<br> * @return number<br> */<br> getCursorPosition: function(t){<br> if (document.selection) {<br> t.focus();<br> var ds = document.selection;<br> var range = ds.createRange();<br> var stored_range = range.duplicate();<br> stored_range.moveToElementText(t);<br> stored_range.setEndPoint("EndToEnd", range);<br> t.selectionStart = stored_range.text.length - range.text.length;<br> t.selectionEnd = t.selectionStart + range.text.length;<br> return t.selectionStart;<br> } else return t.selectionStart<br> },<br><br><br> /*<br> * 设置光标位置<br> * @Method setCursorPosition<br> * @param t element<br> * @param p number<br> * @return<br> */<br> setCursorPosition:function(t, p){<br> this.sel(t,p,p);<br> },<br><br> /*<br> * 插入到光标后面<br> * @Method add<br> * @param t element<br> * @param txt String<br> * @return<br> */<br> add:function (t, txt){<br> var val = t.value;<br> if(document.selection){<br> t.focus()<br> document.selection.createRange().text = txt; <br> } else {<br> var cp = t.selectionStart;<br> var ubbLength = t.value.length;<br> var s = t.scrollTop;<br> // document.getElementById('aaa').innerHTML += s + '<br/>';<br> t.value = t.value.slice(0,t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength);<br> this.setCursorPosition(t, cp + txt.length);<br> // document.getElementById('aaa').innerHTML += t.scrollTop + '<br/>';<br> firefox=navigator.userAgent.toLowerCase().match(/firefox/([d.]+)/) && setTimeout(function(){<br> if(t.scrollTop != s) t.scrollTop=s;<br> },0)<br><br> };<br> },<br><br><br> /*<br> * 删除光标 前面或者后面的 n 个字符<br> * @Method del<br> * @param t element<br> * @param n number n>0 后面 n<0 前面<br> * @return<br> * 重新设置 value 的时候 scrollTop 的值会被清0<br> */<br> del:function(t, n){<br> var p = this.getCursorPosition(t);<br> var s = t.scrollTop;<br> var val = t.value;<br> t.value = n > 0 ? val.slice(0, p - n) + val.slice(p):<br> val.slice(0, p) + val.slice(p - n);<br> this.setCursorPosition(t ,p - (n < 0 ? 0 : n));<br> firefox=navigator.userAgent.toLowerCase().match(/firefox/([d.]+)/) && setTimeout(function(){<br> if(t.scrollTop != s) t.scrollTop=s;<br> },10)<br> },<br><br> /*<br> * 选中 s 到 z 位置的文字<br> * @Method sel<br> * @param t element<br> * @param s number<br> * @param z number<br> * @return<br> */<br> sel:function(t, s, z){<br> if(document.selection){<br> var range = t.createTextRange();<br> range.moveEnd('character', -t.value.length); <br> range.moveEnd('character', z);<br> range.moveStart('character', s);<br> range.select();<br> }else{<br> t.setSelectionRange(s,z);<br> t.focus();<br> }<br><br> },<br><br><br> /*<br> * 选中一个字符串<br> * @Method sel<br> * @param t element<br> * @param s String<br> * @return<br> */<br> selString:function(t, s){<br> var index = t.value.indexOf(s);<br> index != -1 ? this.sel(t, index, index + s.length) : false;<br> }<br><br>}</div> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg==" alt="【分享】 封装js操作textarea 方法集合(兼容很好)。" title="【分享】 封装js操作textarea 方法集合(兼容很好)。"></a></span></div> </div> </div> <div class="entry-footer"> <h3 class="entry-related-title"> 相关推荐 </h3> <ul class="entry-related clearfix"> <li> <a href="/article/3213458.html" title="java入门概念梳理总结 Java入门学习 OOP Java 继承(基于类不如JS的基于原型) Java Override(重写)/Overload(重载) Java 多态：同一个行为具有多个不同表现形式或形态的能力，是同一个接口，使用不同的实例而执行不同操作 Java 抽象类 Java 封装(Encapsulation):一种将抽象性函式接口的实作细节部份包装、隐藏起来的方法。 Java 接口(Interface):一个抽象类型，是抽象方法的集合，接口通常以interface来声明 Java package:为了更好地组织类，Java 提供了包机制，用于区别类名的命名空间 Java 高级" target="_blank"> java入门概念梳理总结 Java入门学习 OOP Java 继承(基于类不如JS的基于原型) Java Override(重写)/Overload(重载) Java 多态：同一个行为具有多个不同表现形式或形态的能力，是同一个接口，使用不同的实例而执行不同操作 Java 抽象类 Java 封装(Encapsulation):一种将抽象性函式接口的实作细节部份包装、隐藏起来的方法。 Java 接口(Interface):一个抽象类型，是抽象方法的集合，接口通常以interface来声明 Java package:为了更好地组织类，Java 提供了包机制，用于区别类名的命名空间 Java 高级 </a> </li> <li> <a href="/article/3008734.html" title="js操作textarea方法集合封装(兼容IE,firefox)" target="_blank"> js操作textarea方法集合封装(兼容IE,firefox) </a> </li> <li> <a href="/article/1945158.html" title="js封装的textarea操作方法集合(兼容很好)" target="_blank"> js封装的textarea操作方法集合(兼容很好) </a> </li> <li> <a href="/article/1765945.html" title="【分享】 封装js操作textarea 方法集合(兼容很好)。" target="_blank"> 【分享】 封装js操作textarea 方法集合(兼容很好)。 </a> </li> <li> <a href="/article/1383921.html" title="js操作textarea方法集合封装(兼容IE,firefox)" target="_blank"> js操作textarea方法集合封装(兼容IE,firefox) </a> </li> <li> <a href="/article/1765944.html" title="mysql常用命令 1、连接Mysql 2、修改密码 3、增加新用户 4.1 创建数据库 4.2 显示数据库 4.3 删除数据库 4.4 连接数据库 4.5 当前选择的数据库 5.1 创建数据表 5.3 删除数据表 5.4 表插入数据 5.5 查询表中的数据 5.6 删除表中数据 5.7 修改表中数据 5.8 增加字段 5.9 修改表名 6、备份数据库 7.1 一个建库和建表的实例1 7.2 一个建库和建表的实例2" target="_blank"> mysql常用命令 1、连接Mysql 2、修改密码 3、增加新用户 4.1 创建数据库 4.2 显示数据库 4.3 删除数据库 4.4 连接数据库 4.5 当前选择的数据库 5.1 创建数据表 5.3 删除数据表 5.4 表插入数据 5.5 查询表中的数据 5.6 删除表中数据 5.7 修改表中数据 5.8 增加字段 5.9 修改表名 6、备份数据库 7.1 一个建库和建表的实例1 7.2 一个建库和建表的实例2 </a> </li> <li> <a href="/article/1765946.html" title="数组--存储地址的计算" target="_blank"> 数组--存储地址的计算 </a> </li> </ul> </div> </div> </article> </div> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-copy"> <div class="menu"> <ul> <a href="/mianze.html" target="_blank" title="网站免责声明"> 网站免责声明 </a> <a href="/sitemap.xml" title="网站地图"> 网站地图 </a> <a href="/chengxuyuan/" title="最新文章"> 最新文章 </a> <a href="/privacy/" title="用户隐私"> 用户隐私 </a> <a href="/copyright/" title="版权申明"> 版权申明 </a> </ul> </div> <div class="copyright"> 本站所有数据收集于网络,如果侵犯到您的权益，请联系网站进行下架处理。 </a> <span title="" class="email-box"></span> </p> </div> <div class="copyright"> <p> Copyright © 2018-2021 Powered By <a href="/" title="亿夏网" target="_blank"> 亿夏网 </a> 备案号： <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="nofollow"> 粤ICP备20002247号 </a> </p> </div> </div> </div> </div> </footer> <div class="action" style="top:80%;"> <div class="a-box gotop" id="j-top" style="display: none;"></div> </div> <script type="text/javascript"> var _wpcom_js = {"ajaxurl":"","slide_speed":"5000"}; </script> <script type="text/javascript" src="/statics/wangyeyixia/js/main.js?v=1"></script> </body> </html>
