程序博客网 > 帝国cms产品展示模板

JavaScript获取文本框光标的像素位置

来源：互联网 发布：帝国cms产品展示模板 编辑：程序博客网 时间：2024/05/16 08:07


【简介】本文主要实现获取textarea和input光标的像素位置，即光标的offsetLeft与offsetTop。可实现如下效果：

首先说明一下，在网上搜到的很多代码是如何获取输入光标位置的如下代码是如何获取光标的的字符位置，如对于串“He|llo World!”返回的是光标|前的字符数2，并不是光标在页面上的像素位置。当然，这段代码对于获取光标的像素位置能起到一定的辅助作用。

复制代码
// 获取光标在文本框的位置
    function _getFocus(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);
    }
复制代码
对于IE浏览器，通过下面的代码1实现起来比较方便。
复制代码
//代码1
if (document.selection) {    
    elem.focus();
    var Sel = document.selection.createRange();
    return {
        left: Sel.boundingLeft,
        top: Sel.boundingTop,
        bottom: Sel.boundingTop + Sel.boundingHeight
    };
}
复制代码
而对于firefox之类的浏览器则通过模拟来实现，如下图所示。首先通过拷贝输入区域的样式到一个div层（clone层），然后在此clone层之中的text子层添加光标之前的字符，并在text子层之后添加focus层，focus层中包含字符“|”来模拟光标，进而通过获取focus层的偏移量即可获得文本光标的像素坐标位置。
具体实现代码如下：
复制代码
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";
}
复制代码
测试页面如下：
复制代码
<!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>
复制代码
	
				
		









 帝国cms产品展示模板
    		帝国cms产品展示模板



原创粉丝点击



		

热门IT博客


历史虚无主义知乎历史虚无主义知乎




xtw100编程器 最新软件xtw100编程器 最新软件




mysql 加锁




centos 7.0 网卡配置




网络前端难吗




sev18软件免费下载




java list 取最后一个




js设置input的宽度




淘宝卖家等级




偷菜游戏源码




centos关闭防火墙




stussy淘宝正品




三合一公式源码




吃宵夜 知乎




苹果怎么恢复网络设置




贵阳IBM预测大数据




nginx 浏览器缓存设置




上海夏易网络怎么样




韩寒郭敬明知乎




fifa15数据库



		

热门问题
    老师的惩罚
    人脸识别
    我在镇武司摸鱼那些年
    重生之率土为王
    我在大康的咸鱼生活
    盘龙之生命进化
    天生仙种
    凡人之先天五行
    春回大明朝
    姑娘不必设防，我是瞎子
    申花控股
    申花赛程表
    申花太阳能
    鲁能对申花
    上海申花足球俱乐部
    申花球迷阿姨逝世
    申花足球俱乐部
    上海绿地申花
    申花球迷不满
    申花击败苏宁
    申花太赫兹纳米能量鞋
    一方连胜申花遭逆转
    申花太赫兹能量鞋
    申花洗衣机价格和图片
    上海申花冰箱
    申花是什么企业
    申花厨卫电器
    上海申花赛程
    上海绿地申花足球俱乐部
    上海申花球票
    上海绿地申花赛程
    申花足球比赛
    申花足协杯赛程
    复旦申花水管家
    申花抽油烟机价格
    申花抽油烟机
    申花球员名单
    复旦申花空气净化器
    大连一方上海申花
    申论范文
    申论是什么
    申论真题
    申论答题
    国考申论
    行测申论
    申论格式
    申论热点
    粉笔申论
    申论作文
    公务员申论
    申论题型


	










程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里