zoukankan      html  css  js  c++  java
  • 获取输入框光标位置及指定位置插入内容

    <!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>
  • 相关阅读:
    C++多态的实现原理
    C++编程之面向对象的三个基本特征
    C/C++中static关键字详解
    C/C++中static关键字作用总结
    Linux防CC攻击脚本
    linux下防火墙iptables原理及使用
    linux下使用 TC 对服务器进行流量控制
    awr报告与statspack报告
    awr报告
    statspack报告
  • 原文地址:https://www.cnblogs.com/wangyongx/p/13680619.html
Copyright © 2011-2022 走看看