js操作textarea方法集合

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <base href="<%=basePath%>">

        <title>js操作textarea方法集合</title>

        <meta http-equiv="pragma" content="no-cache">

        <meta http-equiv="cache-control" content="no-cache">

        <meta http-equiv="expires" content="0">

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="This is my page">

        <style type="text/css">

        #testlujun {

            width: 348px;

            height: 80px;

            border: #ddd 1px solid;

            background: #fafafa;

            padding: 5px 10px;

            outline: none;

            resize: none;

        }

        </style>

    <body>

        <textarea id="testlujun">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'的位置">

    </body>

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

</html>

整理自《封装js操作textarea 方法集合(兼容很好)》

js操作textarea方法集合的更多相关文章

【分享】封装js操作textarea 方法集合(兼容很好)。
请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下. 在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家 ...
javascript、js操作json方法总结(json字符创转换json对象)
相信前端的同学们对json并不陌生,接触过很多.但是很少人知道json的全称是什么,哈哈,我也是查资料知道的.(JSON JavaScript Object Notation是一种轻量级的数据交换格 ...
C#操作XML方法集合
一前言先来了解下操作XML所涉及到的几个类及之间的关系如果大家发现少写了一些常用的方法,麻烦在评论中指出,我一定会补上的!谢谢大家 * 1 XMLElement 主要是针对节点的一些属性进行操 ...
js操作cookie方法
cookie cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109和2965都已废弃,最 ...
H5移动端JS操作LocalStorage方法
LocalStorage和SessionStorage LocalStorage 是对Cookie的优化没有时间限制的数据存储在隐私模式下不可读取大小限制在500万字符左右,各个浏览器不一致在 ...
JS数组遍历方法集合
就让我们在逆战中成长吧,加油武汉,加油自己 1.for循环使用零时变量将长度存起来,当数组较大时优化效果才会比较明显. var ar1=[2,4,6,8] for(var i=0;i<ar1. ...
C# 操作IIS方法集合
如果在win8,win7情况下报错:未知错误(0x80005000) 见http://blog.csdn.net/ts1030746080/article/details/8741399 using ...
JS操作SELECT方法
1.判断select选项中是否存在Value="paraValue"的Item2.向select选项中加入一个Item3.从select选项中删除一个Item4.修改sele ...
js操作json方法总结
相对于前端的老铁来说JSon并不陌生,JSON JavaScript Object Notation 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是一种理想的数据交换格式. json可以 ...

随机推荐

java.util.Date和java.sql.Date的区别和相互转化(转)
java.util.Date是在除了SQL语句的情况下面使用的.java.sql.Date是针对SQL语句使用的,它只包含日期而没有时间部分它们都有getTime方法返回毫秒数,自然就可以直接构建. ...
globals()
[globals() ] globals() Return a dictionary representing the current global symbol table. This is alw ...
MVC学习（四）几种分页的实现（3）
在这篇MVC学习(四)几种分页的实现(2)博文中,根据URL中传入的两个参数(页码数,首页.上一页.下一页.末页的标记符)来获得对应的分页数据, 只是传入的参数太多,调用起来不太方便(标记符不能够写错 ...
php中Closure::bind用法(手册记录)
手册中 Closure::bind — 复制一个闭包,绑定指定的$this对象和类作用域. 具体参数可以看手册,这里记录下这个方法的实际用处． <?php trait MetaTrait { p ...
单片机TM4C123学习（九）：PWM
1.头文件与变量定义 #include "tiva_pwm.h" // PWM 2.初始化 // PWM 初始化,频率为1000,占空比为0 M1PWM7_init(, ); // ...
easyui中tree使用simpleData的形式加载数据
了解了zTree的使用, 发现它的simpleData是非常好用的, 由后台返回一个扁平数据, 直接在前台解析成树形菜单, 网上查了一下, easyui也可以简单实现, 不过....没看懂, 先记录一 ...
python学习笔记-Day7
class Province: # 静态字段(类变量/属性) country ＝ '中国' def __init__(self, name): # 普通字段(实例变量/属性) self.name = ...
DP总结
最长回文子序列 int lpsDp(char * str,int n){ int dp[n][n], tmp; memset(dp,0,sizeof(dp)); for(int i=0; i<n ...
MVC5+EF6 简易版CMS（非接口）第三章：数据存储和业务处理
目录简易版CMS后台管理系统开发流程 MVC5+EF6 简易版CMS(非接口) 第一章:新建项目 MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型 MVC5+EF6 简易版CMS(非接口 ...
按enter执行click或者搜索问题
最近需要将按按钮搜索的功能,改为支持按enter回车键,搜索. 实现按enter,执行click事件还是比较简单的. //按回车搜索用户 $(window).keydown(function (eve ...

js操作textarea方法集合

js操作textarea方法集合的更多相关文章

随机推荐

热门专题