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方法集合

最新文章

热门文章
