zoukankan      html  css  js  c++  java
  • 获取input光标的x和y轴

    http://blog.csdn.net/kingwolfofsky/article/details/6586029

    index.html

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>InputPostion</title>  
        <script type="text/javascript" src="kingwolfofsky.js""></script>  
        <script type="text/javascript">  
            function show(elem) {  
                var p = kingwolfofsky.getInputPositon(elem);  
                var s = document.getElementById('show');  
                s.style.top = p.bottom+'px';  
                s.style.left = p.left + 'px';  
                s.style.display = 'inherit';  
            }  
        </script>  
    </head>  
    <body>  
        <textarea id="text" onkeyup="show(this)" style=" 340px; height: 210px;"></textarea>      
        <br />  
        <input type="text" onkeyup="show(this)" style=" 340px;" />  
        <div id="show" style=" 34px; height: 13px; background: #eee; position: absolute;border:1px solid grey;font-size:13px; display:none;">Tips</div>  
    </body>  
    </html>  

    kingwolfofsky.js

    var kingwolfofsky = {  
        /**  
        * 获取输入光标在页面中的坐标  
        * @param        {HTMLElement}   输入框元素          
        * @return       {Object}        返回left和top,bottom  
        */  
        getInputPositon: function (elem) {  
            if (document.selection) {   //IE Support  
                elem.focus();  
                var Sel = document.selection.createRange();  
                return {  
                    left: Sel.boundingLeft,  
                    top: Sel.boundingTop,  
                    bottom: Sel.boundingTop + Sel.boundingHeight  
                };  
            } else {  
                var that = this;  
                var cloneDiv = '{$clone_div}', cloneLeft = '{$cloneLeft}', cloneFocus = '{$cloneFocus}', cloneRight = '{$cloneRight}';  
                var none = '<span style="white-space:pre-wrap;"> </span>';  
                var div = elem[cloneDiv] || document.createElement('div'), focus = elem[cloneFocus] || document.createElement('span');  
                var text = elem[cloneLeft] || document.createElement('span');  
                var offset = that._offset(elem), index = this._getFocus(elem), focusOffset = { left: 0, top: 0 };  
      
                if (!elem[cloneDiv]) {  
                    elem[cloneDiv] = div, elem[cloneFocus] = focus;  
                    elem[cloneLeft] = text;  
                    div.appendChild(text);  
                    div.appendChild(focus);  
                    document.body.appendChild(div);  
                    focus.innerHTML = '|';  
                    focus.style.cssText = 'display:inline-block;0px;overflow:hidden;z-index:-100;word-wrap:break-word;word-break:break-all;';  
                    div.className = this._cloneStyle(elem);  
                    div.style.cssText = 'visibility:hidden;display:inline-block;position:absolute;z-index:-100;word-wrap:break-word;word-break:break-all;overflow:hidden;';  
                };  
                div.style.left = this._offset(elem).left + "px";  
                div.style.top = this._offset(elem).top + "px";  
                var strTmp = elem.value.substring(0, index).replace(/</g, '<').replace(/>/g, '>').replace(/
    /g, '<br/>').replace(/s/g, none);  
                text.innerHTML = strTmp;  
      
                focus.style.display = 'inline-block';  
                try { focusOffset = this._offset(focus); } catch (e) { };  
                focus.style.display = 'none';  
                return {  
                    left: focusOffset.left,  
                    top: focusOffset.top,  
                    bottom: focusOffset.bottom  
                };  
            }  
        },  
      
        // 克隆元素样式并返回类  
        _cloneStyle: function (elem, cache) {  
            if (!cache && elem['${cloneName}']) return elem['${cloneName}'];  
            var className, name, rstyle = /^(number|string)$/;  
            var rname = /^(content|outline|outlineWidth)$/; //Opera: content; IE8:outline && outlineWidth  
            var cssText = [], sStyle = elem.style;  
      
            for (name in sStyle) {  
                if (!rname.test(name)) {  
                    val = this._getStyle(elem, name);  
                    if (val !== '' && rstyle.test(typeof val)) { // Firefox 4  
                        name = name.replace(/([A-Z])/g, "-$1").toLowerCase();  
                        cssText.push(name);  
                        cssText.push(':');  
                        cssText.push(val);  
                        cssText.push(';');  
                    };  
                };  
            };  
            cssText = cssText.join('');  
            elem['${cloneName}'] = className = 'clone' + (new Date).getTime();  
            this._addHeadStyle('.' + className + '{' + cssText + '}');  
            return className;  
        },  
      
        // 向页头插入样式  
        _addHeadStyle: function (content) {  
            var style = this._style[document];  
            if (!style) {  
                style = this._style[document] = document.createElement('style');  
                document.getElementsByTagName('head')[0].appendChild(style);  
            };  
            style.styleSheet && (style.styleSheet.cssText += content) || style.appendChild(document.createTextNode(content));  
        },  
        _style: {},  
      
        // 获取最终样式  
        _getStyle: 'getComputedStyle' in window ? function (elem, name) {  
            return getComputedStyle(elem, null)[name];  
        } : function (elem, name) {  
            return elem.currentStyle[name];  
        },  
      
        // 获取光标在文本框的位置  
        _getFocus: function (elem) {  
            var index = 0;  
            if (document.selection) {// IE Support  
                elem.focus();  
                var Sel = document.selection.createRange();  
                if (elem.nodeName === 'TEXTAREA') {//textarea  
                    var Sel2 = Sel.duplicate();  
                    Sel2.moveToElementText(elem);  
                    var index = -1;  
                    while (Sel2.inRange(Sel)) {  
                        Sel2.moveStart('character');  
                        index++;  
                    };  
                }  
                else if (elem.nodeName === 'INPUT') {// input  
                    Sel.moveStart('character', -elem.value.length);  
                    index = Sel.text.length;  
                }  
            }  
            else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox support  
                index = elem.selectionStart;  
            }  
            return (index);  
        },  
      
        // 获取元素在页面中位置  
        _offset: function (elem) {  
            var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement;  
            var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0;  
            var top = box.top + (self.pageYOffset || docElem.scrollTop) - clientTop, left = box.left + (self.pageXOffset || docElem.scrollLeft) - clientLeft;  
            return {  
                left: left,  
                top: top,  
                right: left + box.width,  
                bottom: top + box.height  
            };  
        }  
    };  
      
    function getPosition(ctrl) {  
        var p = kingwolfofsky.getInputPositon(ctrl);  
        document.getElementById('show').style.left = p.left + "px";  
        document.getElementById('show').style.top = p.bottom + "px";  
    }  
  • 相关阅读:
    如何在Wyn Enterprise中实现数据脱敏
    报表工具中如何在表格实现累计同比
    同一报表,根据不同条件,执行不同Sql
    报表单元格内超过一定长度显示省略号,鼠标悬浮显示全部内容
    报表实现按照天/周/月/季度/年进行快速查询,并且根据快速选择条件进行汇总统计
    典型报表设计:项目应收款统计,行分组不汇总、分组内过滤、行记录和汇总计算
    报表表格实现自定义序号
    报表中常见模糊查询实现
    如何在仪表板表格中将日期显示为文本格式?
    MySQL动态数据源的实现
  • 原文地址:https://www.cnblogs.com/CyLee/p/7655810.html
Copyright © 2011-2022 走看看