获取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="width: 340px; height: 210px;"></textarea>

    <br />

    <input type="text" onkeyup="show(this)" style="width: 340px;" />

    <div id="show" style="width: 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;width: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(/\n/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";

}

获取input光标的x和y轴的更多相关文章

有趣的js获取input标签中光标的索引
先看动图如下,我们就可以很清楚的知道获取input标签中光标的索引的意思了. 由于IE支持document.selection,Firefox,Chrome,Safari以及Opera都有select ...
PhoneGap 加速计 api 获取加速计 x 轴 y 轴 z 轴信息
一.PhoneGap 加速计 Accelerometer 对象介绍 1.主要方法 accelerometer.getCurrentAcceleration 获取当前设备在 x,y,z 轴上的加速度信息 ...
wpf根据X与Y轴获取内部值
效果图: 环境 Visual Studio ,.Net Framework 4.0 SDK 支持Windows XP,Windows Win7.. 实现方法: 创建ListBox设置ListBox.I ...
echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...
android3D动画,绕y轴旋转
原文地址:http://blog.csdn.net/x_i_a_o_h_a_i/article/details/40449847 其实网上的3D旋转的例子很多,在这里我只是想把其代码做一个解释. 先上 ...
Jqplot使用总结之二(双Y轴)
最近需要用Jqplot做双Y轴的Chart图,首先我找到了文档上的例子并对数据做了一些调整: 1.例子展示: var s1 = [["2002-01-01", 112000], [ ...
Echart实现多个y轴，坐标轴的个数及名称由后台传过来的json数据决定。
yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...
Easyui dialog Y轴滚动条定位
使用Easyui dialog进行数据新增的时候,如果Y轴方向有滚动条,当关闭之前的时候,将滚动条拉到最下方,再次打开的时候,滚动条还是定位在最下方. 需求: 每次打开的时候dialog Y轴滚动条定 ...
matplotlib y轴标注显示不全以及subplot调整的问题
matplotlib y轴标注显示不全以及subplot调整的问题问题: 我想在y轴显示的标注太长,想把它变成两行显示,发现生成的图形只显示的第二行的字,把第一行的字挤出去了想要的是显示两行这样子 ...

随机推荐

docker 集群 kubernetes 1.8 构建
1.环境说明:操作系统:CentOS7Kubernetes 版本:v1.8.3Docker 版本:v17.06-ce master 192.168.10.220 etcd kube-apiser ...
Position 属性的学习理解
position 当时在学习的时候也没有进入深入的研究,主要是因为平时自己用的不是很多.今天看到了篇解释不错的文章就整理,学习下. http://www.cnblogs.com/bokin/archi ...
Nature Reserve
Nature Reserve time limit per test:2 seconds memory limit per test:256 megabytes input:standard inpu ...
大楼(bzoj 2165)
Description xz是一个旅游爱好者,这次他来到了一座新的城市.城市中央有一幢高耸入云的大楼.这幢楼到底有多少层呢?据说和非负整数的个数是一样多的.xz想爬上这座大楼来观赏新城市的全景.这幢大 ...
set与map的区别
STL中:MAP的节点是一对数据. SET的节点是一个数据. Map使用关键值Key来唯一标识每一个成员 map可以重复.set是集合都属于关联容器只不过, map的形式 map& ...
Select语句执行顺序《转》
原文发布时间为:2010-10-12 -- 来源于本人的百度文章 [由搬家工具导入] 目的在于理解如何Select 【搜索所得】：标准的 SQL 的解析顺序为:(1).FROM 子句, 组装来自不同 ...
js3:数据类型，数组，String各个属性，以及字符串表达式用eval计算
原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...
深入代码详谈irqbalance【转】
转自:http://blog.csdn.net/whrszzc/article/details/50533866 版权声明:本文为博主原创文章,未经博主允许不得转载. 深入代码详谈irqbalance ...
centos 7 安装git并配置ssh
一.安装 1.查看是否安装git rpm -qa|grep git 有git加版本号就说明已经安装过了 2.安装git yum install git 3.查看git版本 git version 二. ...
DB2时间函数实现时间加减
时间加减:后边记得跟上时间类型如day.HOUR TIMESTAMP ( TIMESTAMP(DEF_TIME)+1 day)+18 HOUR DB2时间函数是我们最常见的函数之一,下面就为您介绍 ...

获取input光标的x和y轴

获取input光标的x和y轴的更多相关文章

随机推荐

热门专题