Node.js는 지정된 컨트롤의 입력 커서 좌표를 얻습니다. IE, Chrome, Firefox 및 기타 주류 브라우저_javascript 기술과 호환됩니다.

코드 직접 업로드

코드 복사 코드는 다음과 같습니다

var kingwolfofsky = {
/**
* 페이지에서 입력 커서의 좌표를 가져옵니다.
* @param {HTMLElement} 입력 상자 요소
* @return {Object} 왼쪽, 위쪽, 아래쪽 반환
*/
getInputPositon: function (elem) {
if (document.selection) { //IE 지원
elem. 집중하다();
var Sel = document.selection.createRange();
return {
왼쪽: Sel.boundingLeft,
상단: Sel.boundingTop,
하단: Sel.boundingTop Sel.boundingHeight
};
} else {
var that = this;
var cloneDiv = '{$clone_div}', cloneLeft = '{$cloneLeft}', cloneFocus = '{$cloneFocus}', cloneRight = '{$cloneRight}';
var none = ' ';
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 = { 왼쪽: 0, 위쪽: 0 };
if (!elem[cloneDiv]) {
elem[cloneDiv] = div, elem[cloneFocus] = 포커스;
elem[cloneLeft] = 텍스트;
div.appendChild(텍스트);
div.appendChild(포커스);
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 = '가시성: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(/n/ g, '
').replace(/s/g, 없음);
text.innerHTML = strTmp;
focus.style.display = '인라인 블록';
try { focusOffset = this._offset(focus); } 잡기 (e) { };
focus.style.display = '없음';
return {
왼쪽: focusOffset.left,
상단: focusOffset.top,
하단: focusOffset.bottom
};
}
},
// 克隆元素样式并返回类
_cloneStyle: 함수(elem, 캐시) {
if (!cache && elem['${cloneName}']) return elem['${cloneName}'];
var className, name, rstyle = /^(number|string)$/;
var rname = /^(content|outline|outlineWidth)$/; //오페라: 내용; IE8:outline &&outlineWidth
var cssText = [], sStyle = elem.style;
for (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(이름);
cssText.push(':');
cssText.push(val);
cssText.push(';');
};
};
};
cssText = cssText.join('');
elem['${cloneName}'] = className = 'clone' (새 날짜).getTime();
this._addHeadStyle('.' className '{' cssText '}');
클래스 이름 반환;
},
// 向页头插入样式
_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 = 내용) || style.appendChild(document.createTextNode(content));
},
_style: {},
// 获取最终样式
_getStyle: 'getCompulatedStyle' in window ? function (elem, name) {
return getCompulatedStyle(elem, null)[name];
} : 함수(요소, 이름) {
return elem.currentStyle[이름];
},
// 获取光标在文本框的位置
_getFocus: function (elem) {
var index = 0;
if (document.selection) {// IE 지원
elem.focus();
var Sel = document.selection.createRange();
if (elem.nodeName === 'TEXTAREA') {//textarea
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(elem);
var 인덱스 = -1;
while (Sel2.inRange(Sel)) {
Sel2.moveStart('character');
색인 ;
};
}
else if (elem.nodeName === 'INPUT') {// input
Sel.moveStart('character', -elem.value.length);
색인 = Sel.text.length;
}
}
else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox 지원
index = elem.selectionStart;
}
반환(색인);
},
// 获取元素在页face中位置
_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 {
왼쪽: 왼쪽,
상단: 상단,
오른쪽: 왼쪽 box.width,
하단: 상단 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"
}

---- ------------------------------------- ------------------------------------- ------------------
통화 코드:

코드 복사 코드는 다음과 같습니다.

var elem = document.getElementById(controlID);
var p = kingwolfofsky.getInputPositon(elem)
p.left ;/ /지정된 위치의 좌표 가져오기
p.top;//위와 동일
p.bottom;//위와 동일