js操作textarea方法集合封装(兼容IE,firefox)


Posted in Javascript onFebruary 22, 2011

注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美。如果有高手也研究过,麻烦指点下。

完整测试代码:

<textarea id="testlujun" style="width: 300px; height: 50px;">abcdefghijklmnopqrstuvwxyz</textarea>
<br />
<input onclick="alert(TT.getCursorPosition(test))" type="button" value="光标位置" />
<input onclick="TT.setCursorPosition(test,3)" type="button" value="设置光标到3第位置" />
<input onclick="TT.add(test,'你好')" type="button" value="添加'你好'到光标后面" />
<input onclick="TT.del(test,2)" type="button" value="删除光标前2个字符" />
<input onclick="TT.del(test,-2)" type="button" value="删除光标后2个字符" />
<input onclick="TT.sel(test,0,2)" type="button" value="选中字符0-2的位置" />
<input onclick="TT.selString(test,'mno')" type="button" value="选中字符'mno'的位置" />
<script type="text/javascript">// <![CDATA[
var test = document.getElementById('testlujun');
var TT = { /*
  * 获取光标位置
  * @Method getCursorPosition
  * @param t element
  * @return number
  */
 getCursorPosition: function(t){
  if (document.selection) {
   t.focus();
   var ds = document.selection;
   var range = ds.createRange();
   var stored_range = range.duplicate();
   stored_range.moveToElementText(t);
   stored_range.setEndPoint("EndToEnd", range);
   t.selectionStart = stored_range.text.length - range.text.length;
   t.selectionEnd = t.selectionStart + range.text.length;
   return t.selectionStart;
  } else return t.selectionStart
 },
 
 /*
  * 设置光标位置
  * @Method setCursorPosition
  * @param t element
  * @param p number
  * @return
  */
 setCursorPosition:function(t, p){
  this.sel(t,p,p);
 },
 /*
  * 插入到光标后面
  * @Method add
  * @param t element
  * @param txt String
  * @return
  */
 add:function (t, txt){
  var val = t.value;
  if(document.selection){
   t.focus()
   document.selection.createRange().text = txt;  
  } else {
   var cp = t.selectionStart;
   var ubbLength = t.value.length;
   var s = t.scrollTop;
  // document.getElementById('aaa').innerHTML += s + '<br />';
   t.value = t.value.slice(0,t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength);
   this.setCursorPosition(t, cp + txt.length);
  // document.getElementById('aaa').innerHTML += t.scrollTop + '<br />';
   firefox=navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function(){
    if(t.scrollTop != s) t.scrollTop=s;
   },0)

  };
 },
 
 /*
  * 删除光标 前面或者后面的 n 个字符
  * @Method del
  * @param t element
  * @param n number  n>0 后面 n<0 前面
  * @return
  * 重新设置 value 的时候 scrollTop 的值会被清0
  */
 del:function(t, n){
  var p = this.getCursorPosition(t);
  var s = t.scrollTop;
  var val = t.value;
  t.value = n > 0 ? val.slice(0, p - n) + val.slice(p):
      val.slice(0, p) + val.slice(p - n);
  this.setCursorPosition(t ,p - (n < 0 ? 0 : n));
  firefox=navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function(){
   if(t.scrollTop != s) t.scrollTop=s;
  },10)
 },
 /*
  * 选中 s 到 z 位置的文字
  * @Method sel
  * @param t element
  * @param s number
  * @param z number
  * @return
  */
 sel:function(t, s, z){
  if(document.selection){
   var range = t.createTextRange();
   range.moveEnd('character', -t.value.length);         
   range.moveEnd('character', z);
   range.moveStart('character', s);
   range.select();
  }else{
   t.setSelectionRange(s,z);
   t.focus();
  }
 },
 
 /*
  * 选中一个字符串
  * @Method sel
  * @param t element
  * @param s String
  * @return
  */
 selString:function(t, s){
  var index = t.value.indexOf(s);
  index != -1 ? this.sel(t, index, index + s.length) : false;
 }
}
// ]]></script>
Javascript 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
快速排序 php与javascript的不同之处
Feb 22 #Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 #Javascript
JavaScript中的排序算法代码
Feb 22 #Javascript
JavaScript中几种常见排序算法小结
Feb 22 #Javascript
用JS控制回车事件的代码
Feb 20 #Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 #Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 #Javascript
You might like
PHP安装全攻略:APACHE
2006/10/09 PHP
写一个用户在线显示的程序
2006/10/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
php控制文件下载速度的方法
2015/03/24 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
javascript模拟命名空间
2015/04/17 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
python装饰器decorator介绍
2014/11/21 Python
Python获取当前路径实现代码
2017/05/08 Python
如何通过Python实现标签云算法
2019/07/02 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
成教自我鉴定
2013/10/27 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
django上传文件的三种方式
2021/04/29 Python