关于文本输入框获取光标位置以及指定位置插入内容

最新推荐文章于 2024-05-09 14:08:24 发布

耗子王

最新推荐文章于 2024-05-09 14:08:24 发布

阅读量1w

点赞数 2

分类专栏： html javascript 文章标签： js javascript html

本文链接：https://blog.csdn.net/hearain528/article/details/48052853

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<textarea name="" id="edit" cols="100" rows="10"></textarea>
<button οnclick="getPos()">获取光标位置</button>
<button οnclick="getSelect()">获取选中内容</button>
<button οnclick="insert()">插入文本</button>
<script>
    $.extend($.fn,{
        //获取文本框内光标位置
        getSelectionStart: function() {
            var e = this[0];
            if (e.selectionStart) {
                return e.selectionStart;
            } else if (document.selection) {
                e.focus();
                var r=document.selection.createRange();
                var sr = r.duplicate();
                sr.moveToElementText(e);
                sr.setEndPoint('EndToEnd', r);
                return sr.text.length - r.text.length;
            }

            return 0;
        },
        getSelectionEnd: function() {
            var e = this[0];
            if (e.selectionEnd) {
                return e.selectionEnd;
            } else if (document.selection) {
                e.focus();
                var r=document.selection.createRange();
                var sr = r.duplicate();
                sr.moveToElementText(e);
                sr.setEndPoint('EndToEnd', r);
                return sr.text.length;
            }
            return 0;
        },
        //自动插入默认字符串
        insertString: function(str) {
            $(this).each(function() {
                var tb = $(this);
                tb.focus();
                if (document.selection){
                    var r = document.selection.createRange();
                    document.selection.empty();
                    r.text = str;
                    r.collapse();
                    r.select();
                } else {
                    var newstart = tb.get(0).selectionStart+str.length;
                    tb.val(tb.val().substr(0,tb.get(0).selectionStart) +
                            str + tb.val().substring(tb.get(0).selectionEnd));
                    tb.get(0).selectionStart = newstart;
                    tb.get(0).selectionEnd = newstart;
                }
            });

            return this;
        },
        setSelection: function(startIndex,len) {
            $(this).each(function(){
                if (this.setSelectionRange){
                    this.setSelectionRange(startIndex, startIndex + len);
                } else if (document.selection) {
                    var range = this.createTextRange();
                    range.collapse(true);
                    range.moveStart('character', startIndex);
                    range.moveEnd('character', len);
                    range.select();
                } else {
                    this.selectionStart = startIndex;
                    this.selectionEnd = startIndex + len;
                }
            });

            return this;
        },
        getSelection: function() {
            var elem = this[0];

            var sel = '';
            if (document.selection){
                var r = document.selection.createRange();
                document.selection.empty();
                sel = r.text;
            } else {
                var start = elem.selectionStart;
                var end = elem.selectionEnd;
                var content = $(elem).is(':input') ? $(elem).val() : $(elem).text();
                sel = content.substring(start, end);
            }
            return sel;
        }
    })
</script>
<script>
    function getPos(){
        alert($("#edit").getSelectionStart());
    }
    function getSelect(){
        alert($("#edit").getSelection());
    }
    function insert(){
       $("#edit").insertString("hello");

    }
</script>
</body>
</html>

耗子王

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
关于文本输入框获取光标位置以及指定位置插入内容

获取光标位置获取选中内容插入文本 $.extend($.fn,{ //获取文本框内光标位置 getSelectionStart: function() { var e = this[0]; if (e.selectionStart) { return e.selection
复制链接

扫一扫

专栏目录