文档章节

获取Textarea 元素当前的光标位置及document.selection.createRange()资料

深圳大道
 深圳大道
发布于 2016/12/29 15:39
字数 471
阅读 19
收藏 0
<!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/1999/xhtml">
<head>
    <title>Demo : Textarea 元素的光标位置</title>
    <style type="text/css">
        #result
        {
            font-size: 18px;
            line-height: 25px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <h1>
            Textarea 元素的光标位置</h1>
        <ul>
            <li>获取 Textarea 元素当前的光标位置</li>
            <li>设置回原先的 Textarea 元素的光标位置</li>
            <li>在 Textarea 元素的光标位置插入文本</li>
        </ul>
        <form action="#">
        <textarea id="test" rows="8" cols="50"></textarea>
        <p>
            <input type="button" id="get" value="Get Cursor Position" />
            <input type="button" id="set" value="Set Cursor Position" />
            <input type="button" id="add" value="Add Text After Cursor Position" />
        </p>
        </form>
        <h2>
            Textarea Range:</h2>
        <div id="result">
        </div>
        <script type="text/javascript">

            document.getElementById("get").onclick = function () {
                //alert(tx.value.length);
                var tx = document.getElementById("test");
                var re = document.getElementById("result");
                var pos = cursorPosition.get(tx);
                re.innerHTML = ("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--' : pos.text));
            }

            document.getElementById("set").onclick = function () {
                var tx = document.getElementById("test");
                var re = document.getElementById("result");
                var pos = cursorPosition.get(tx);
                cursorPosition.set(tx, pos);
                re.innerHTML = "";
            }

            document.getElementById("add").onclick = function () {
                var tx = document.getElementById("test");
                pos = cursorPosition.get(tx);
                cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本:", ""));
            }

            /**
            * cursorPosition Object
            */
            var cursorPosition = {
                get: function (textarea) {
                    var rangeData = { text: "", start: 0, end: 0 };

                    if (textarea.setSelectionRange) { // W3C	
                        textarea.focus();
                        rangeData.start = textarea.selectionStart;
                        rangeData.end = textarea.selectionEnd;
                        rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : "";
                    } else if (document.selection) { // IE
                        textarea.focus();
                        var i,
				oS = document.selection.createRange(),
                        // Don't: oR = textarea.createTextRange()
				oR = document.body.createTextRange();
                        oR.moveToElementText(textarea);

                        rangeData.text = oS.text;
                        rangeData.bookmark = oS.getBookmark();

                        // object.moveStart(sUnit [, iCount]) 
                        // Return Value: Integer that returns the number of units moved.
                        for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) {
                            // Why? You can alert(textarea.value.length)
                            if (textarea.value.charAt(i) == '\r') {
                                i++;
                            }
                        }
                        rangeData.start = i;
                        rangeData.end = rangeData.text.length + rangeData.start;
                    }

                    return rangeData;
                },

                set: function (textarea, rangeData) {
                    var oR, start, end;
                    if (!rangeData) {
                        alert("You must get cursor position first.")
                    }
                    textarea.focus();
                    if (textarea.setSelectionRange) { // W3C
                        textarea.setSelectionRange(rangeData.start, rangeData.end);
                    } else if (textarea.createTextRange) { // IE
                        oR = textarea.createTextRange();

                        // Fixbug : ues moveToBookmark()
                        // In IE, if cursor position at the end of textarea, the set function don't work
                        if (textarea.value.length === rangeData.start) {
                            //alert('hello')
                            oR.collapse(false);
                            oR.select();
                        } else {
                            oR.moveToBookmark(rangeData.bookmark);
                            oR.select();
                        }
                    }
                },

                add: function (textarea, rangeData, text) {
                    var oValue, nValue, oR, sR, nStart, nEnd, st;
                    this.set(textarea, rangeData);

                    if (textarea.setSelectionRange) { // W3C
                        oValue = textarea.value;
                        nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);
                        nStart = nEnd = rangeData.start + text.length;
                        st = textarea.scrollTop;
                        textarea.value = nValue;
                        // Fixbug:
                        // After textarea.values = nValue, scrollTop value to 0
                        if (textarea.scrollTop != st) {
                            textarea.scrollTop = st;
                        }
                        textarea.setSelectionRange(nStart, nEnd);
                    } else if (textarea.createTextRange) { // IE
                        sR = document.selection.createRange();
                        sR.text = text;
                        sR.setEndPoint('StartToEnd', sR);
                        sR.select();
                    }
                }
            }
        </script>
    </div>
</body>
</html>


 

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/7929709

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
document.selection.createRange方法

获取用户选择文本 document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象。配合 execCommand,在 HTML 编辑器中很有用,比如:文字...

SKYCOBS
2016/03/08
66
0
JavaScript 中在光标处插入添加文本标签节点 详细方法

正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。 思路:首先获得用户的选区(光标当前位置可理解...

山哥
2012/02/23
322
0
奇技淫巧——在textarea中插入文本

今天在看自己的记录时发现在几个月前的一个项目中碰到一个这样的需求:做一些简单的计算按钮,点击这些按钮之后就在后面的输入框中显示对应的计算方法,对于一些函数类的计算方法需要将光标定...

韭菜的故事
2018/07/18
0
0
使用方向键在输入框矩阵中自然的导航

关于使用键盘来在Web页的输入框中导航这个事我一周前就说了,今天才把它整理完,真是不好意思。不过整理后的代码结构清晰、使用方便、价格公道、童叟无欺。 主要的核心技术就是两个,一个是:...

唐玄奘
2017/12/08
0
0
jquery中文本域光标操作(选中、添加、删除、获取)

导读] 以前我们会使用js来实现读取你当前光标的效果,下面我来介绍利用jquery中文本域光标来实现选中、添加、删除、获取操作,有需要的朋友可参考。 该针对文本域的扩展实现的功能及使用方法...

Carl_
2014/09/09
328
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
41分钟前
6
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
51分钟前
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0
8086汇编基础 start 程序入口标签的示例

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
今天
4
0
uni app 零基础小白到项目实战2

<template> <scroll-view v-for="(card, index) in list" :key="index"> <view v-for =(item, itemIndex) in card"> {{item.value}}</view> </scroll-view></template> GraceUi va......

达达前端小酒馆
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部