js封装的textarea操作方法集合(兼容很好)

虽然你现在看来没什么用，当要用的时候又到处找资料，还不如现在收集一下。

在DOM里面操作textarea里面的字符，是比较麻烦的。

于是我有这个封装分享给大家，测试过IE6,8, firefox ,chrome, opera , safari。兼容没问题。

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


代码如下:

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;
}
}

赞 (0)

相关推荐

  • js通过元素class名字获取元素集合的具体实现

    复制代码 代码如下: function getElementsByClassName(n) { var classElements = [],allElements = document.getElementsByTagName('*'); for (var i=0; i< allElements.length; i++ ) { if (allElements[i].className == n ) { classElements[classElements.length] = allEleme

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

    注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美.如果有高手也研究过,麻烦指点下. 完整测试代码: 复制代码 代码如下: <textarea id="testlujun" style="width: 300px; height: 50px;">abcdefghijklmnopqrstuvwxyz</textarea><br /><input onclick=&q

  • js采用map取到id集合组并且实现点击一行选中一行

    复制代码 代码如下: <tbody > <tr > <td >1</td> <td>楼盘开业<br>折扣大大</td> <td>2011-11-11</td> <td>短信通知</td> </tr> <tr > <td>2</td> <td>楼盘开业<br>折扣大大</td> <td&g

  • js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • html的DOM中document对象images集合用法实例

    本文实例讲述了html的DOM中document对象images集合用法.分享给大家供大家参考.具体分析如下: images 集合可返回对文档中所有 Image 对象的引用. 语法: 复制代码 代码如下: document.images[] 为了与 0 级 DOM 兼容,该集合不包括由 <object> 标记定义的图像. 例子: 复制代码 代码如下: <html> <body> <img border="0" src="hackanm

  • js 提取class相同的节点集合

    function GetClass(className){return getElementsByClassName(className)} var $c=function(array){var nArray = [];for (var i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS入门代码集合第1/4页

    基础知识:HTML  JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language="JavaScript">   2: JavaScript code goes here   3: </script>    2 隐藏脚本代码   1: <script language="JavaScript">   2: <!--   3: document.write("Hello&quo

  • Backbone.js中的集合详解

    Backbone.js中的集合详解

    Backbone.js的集合只是一个简单的有序集的模型.通过适应模型和集合,我们可以避免数据处理逻辑放到了我们的视图层.此外,模型和集合还提供了便利的与后端一起工作的方法,当数据发生变化时,可以自动化地标记Backbone.js视图.这样,它可以用于如下的情况: 复制代码 代码如下: Model: Animal, Collection: Zoo 通常情况下你的集合只适应一种模型,但模型本身并不局限于集合的类型. 复制代码 代码如下: Model: person, Collection: Offi

  • javascript document.images实例

    <script> dxy=''; for (cnrose=0;cnrose<document.images.length;cnrose++) {  dxy+='<img src='+document.images[cnrose].src+'>[br]' } if(dxy!='')  {   document.write(dxy);   void(document.close())  } else  {  alert('No images!')  }  </script&

  • js封装的textarea操作方法集合(兼容很好)

    虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下. 在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家,测试过IE6,8, firefox ,chrome, opera , safari.兼容没问题. 注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美.如果有高手也研究过,麻烦指点下. 复制代码 代码如下: var TT = { /* * 获取光标位置 * @Method get

  • 使用原生js封装的ajax实例(兼容jsonp)

    实例如下: /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @param {object}opt.data 发送的参数,格式为对象类型 * @param {function}opt.success ajax发送并接收成功调用的回调函数 */

  • 纯js封装的ajax功能函数与用法示例

    本文实例讲述了纯js封装的ajax功能函数与用法.分享给大家供大家参考,具体如下: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)AJAX 不是新的编程语言,而是一种使用现有标准的新方法.是7种技术的综合,它包含了七个技术(javascript xml xstl xhtml dom xmlhttprequest , css),  ajax  是一个粘合剂. 直接上程序: js调用部分: <script src="ds

  • 原生js封装运动框架的示例讲解

    昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子 如下代码: #div{ width: 100px; height: 100px; background

  • js封装成插件_Canvas统计图插件编写实例

    js封装成插件_Canvas统计图插件编写实例

    之前就说过,我想写一个canvas画统计图的插件,现在写好了 先说下实现的功能吧: 1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图 2.可以选择画折现图还是柱形统计图,或者两者都实现 3.可以自由定义折现颜色,坐标颜色,柱形图颜色 和canvas边框颜色,当然边框你也可以选择要或者不要 4.可以选择是否实现柱形图和折现图的动画实现 实现过程 画坐标--画箭头--做X轴和Y轴的标注--画柱形图--画折现图 话不多说,上代码 (function(window,document){ va

  • 原生JS封装animate运动框架的实例

    如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; b

  • 基于cropper.js封装vue实现在线图片裁剪组件功能

    基于cropper.js封装vue实现在线图片裁剪组件功能

    效果图如下所示, github:demo下载 cropper.js github:cropper.js 官网(demo) cropper.js 安装 npm或bower安装 npm install cropper # or bower install cropper clone下载:下载地址 git clone https://github.com/fengyuanchen/cropper.git 引用cropper.js 主要引用cropper.js跟cropper.css两个文件 <scri

  • JS封装转换前后端接口数据格式工具函数下划线<=>大写

    目录 一.前言 二.思路 三.代码 四.效果 结语 一.前言 这段时间接近年底,公司的业务也不是很繁忙,有些闲暇的时间,就模仿ruoyi写一个后台系统,技术栈前端是react18,后端为koa2: 在一个接口返回数据的过程中,遇到一个问题,就是后端数据保存到数据库中的命名标准是下划线,而前端的这边的命名标准是驼峰命名,所以如果直接将从数据库的数据返回给前端,便非常不优雅,网上想直接找工具包,也没找到合适的,故而自己手写了一个,如果有同样需求的小伙伴们,可以直接拿去用. 二.思路 一般后端返回给前

  • 原生js封装添加class,删除class的实例

    一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ")); for(var i=0;i<arr.length;i++){ for(var k=arr.length-1;k>i;k--){ (arr[k]==="")&&arr.splice(k,1); (arr[i]===arr[k])&&

  • js封装可使用的构造函数继承用法分析

    本文实例讲述了js封装可使用的构造函数继承用法.分享给大家供大家参考.具体如下: 先来看下面这段代码 (YUI)库所用的方法: 复制代码 代码如下: function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prot

随机推荐