JavaScript获取文本框光标距离body左边和上边的像素位置

最新推荐文章于 2022-08-23 14:04:44 发布
最新推荐文章于 2022-08-23 14:04:44 发布
阅读量1.8k 收藏
点赞数

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

html 代码

<!DOCTYPE html>
<html>
<head>
    <title>InputPostion</title>
</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>
<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>
</html>

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
        };
    }
};
haogemr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js获取光标位置和设置文本框光标位置示例代码
10-26
本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置，以下代码兼容IE和Chrome，Firefox，大家参考使用吧
获取网页中的文本光标相对屏幕的坐标
Comvir的专栏
07-04 376
此代码仅chrome系列有效，适用于textarea和标记contenteditable的DIV
js 返回DIV左上角坐标距视窗口的距离
非专业前端
09-05 1239
比较 document.getElementById("#id").getBoundingClientRect().top;
html获取div位置,原生 JS 获取元素的尺寸和位置
weixin_39683172的博客
06-04 445
关于元素的尺寸和位置，这原本是 CSS 干的事，但更多的时候需要用 JavaScript 来获取这些参数，比如一个很好的例子 js 实现的图片瀑布流。在介绍 JS 中的例子之前，先来说明一下 css 中的元素尺寸。CSS 中的 width 和 height先开个头吧，一个元素所占据的物理尺寸包括以下几个部分，由内到外分别是内容，padding，border，margin，这些值加到一起才算是一个元...
js获取div相对屏幕的坐标位置
weixin_34174322的博客
08-02 3064
1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.getBoundingClientRect().top; return {x:x,y:y}; } 参数传js原生...
使用 JavaScript 将鼠标指针移动到特定位置
six6de6的博客
08-23 7138
使用 JavaScript 将鼠标指针移动到特定位置
android学习笔记(2)EditText控件的学习
照玄
08-07 1115
一,设置一个输入框 添加控件: <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="52dp" /> 二,消除输入框的聚焦 方法一: <EditT
获取光标离input输入框或者textarea文本框的像素距离
brilliantSt的博客
03-18 680
问题描述：项目需要实现微信的@功能，在用户输入@的时候弹出包含群成员的列表框，这个列表框的位置是挨着@符号的，所以需要获取到@符号的位置来定位列表框的位置。 使用技术：jQuery 解决思路：非IE浏览器都无法直接获取到光标到输入框的距离（网上搜到的很多代码都是获取的光标前的字符数），可行的解决思路是将文本框里面的值取出来放进一个盒子（div）里面，然后获取该值后面元素距离盒子的距离。 解决方法： <!DOCTYPE html> <html> <head> &lt
如何获取与设置光标在input框的位置
热门推荐
在下月亮有何贵干
11-12 1万+
遇到一个场景，需要一些文本标签，点击自动添加进文本框，这时候就需要掌握如何获取与设置光标在input框的位置，做一个记录，记录使用方法。
获得鼠标的坐标值
nqxcwl的专栏
11-08 327
一、需求： 1、当需求为获得的坐标值相对于body时实现方法 2、当需求为获得的坐标值相对于某一对象时实现方法 二、实现： var x , y; //当需求为获得的坐标值相对于body时，用...
JavaScript自定义文本框光标
10-20
本篇文章主要介绍了JavaScript自定义文本框光标的方法实例，具有很好的参考价值。下面跟着小编一起来看下吧
javascript设置文本框光标的方法实例小结
10-21
主要介绍了javascript设置文本框光标的方法,结合实例形式总结分析了javascript针对文本框光标的位置、设置及文本操作的相关技巧,需要的朋友可以参考下
在页面中js获取光标/鼠标的坐标及光标的像素坐标
10-26
页面JS光标/鼠标坐标，百度统计中有个热点统计图，我们要做的就是获取光标的像素坐标
javascript获取以及设置光标位置
10-20
本文介绍了javascript获取以及设置光标位置的方法，具有很好的参考价值，下面跟着小编一起来看下吧
JS获取某个元素距离屏幕左边和上边的像素
技术年代
12-16 4595
这是获取左边距离 function getAbsLeft(obj){ var l=obj.offsetLeft; while(obj.offsetParent != null){ obj = obj.offsetParent; l += obj.offsetLeft; } return l; }   这是获取...
[转]js checkBrowser
weixin_30727835的博客
10-13 224
[转]js checkBrowser <script type= "text/javascript " language= "javascript "> <!-- function checkBrowser() { var ClientInfo= " "; ClientInfo = ClientInfo...
js获取DIV的位置坐标的三种方法！
appteam_vlctech的专栏
06-13 1万+
js获取DIV的位置坐标的三种方法！       方法一：   var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); alert(odiv.getBoundingClientRect().top); 　　方法
js获取光标位置
u011649976的博客
10-23 2012
js获取光标位置 1.概念和原理 DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置。当选取范围起始点和结束点一样时，就是光标插入的位置。 1.1 术语 anchor(瞄点)：选区起点。 focus(焦点)：选区终点。 range(范围)：选区范围，包含整个节点或节点的一部分。 1.2 Selec...
edittext 获取光标
最新发布
07-28
要获取 EditText 的光标位置，可以使用 `editText.getSelectionStart()` 方法来获取当前光标的起始位置。这个方法返回一个整数值，表示光标在 EditText 中的索引位置。 以下是一个示例代码，演示如何获取 EditText 的光标位置： ```java EditText editText = findViewById(R.id.editText); // 获取光标位置 int cursorPosition = editText.getSelectionStart(); // 打印光标位置 Log.d("Cursor position", String.valueOf(cursorPosition)); ``` 请确保将 `findViewById(R.id.editText)` 中的 `R.id.editText` 替换为你的 EditText 的实际 ID。 这样，你就可以获取到 EditText 的光标位置，并将其用于你的需求中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值