Js is compatible with multiple mainstream browsers, such as IE, Chrome, and Firefox.

Js obtains coordinates of the specified control cursor, and is compatible with multiple mainstream browsers such as IE, Chrome, and Firefox. The code implementation and calling code are as follows. If you are interested, refer to the following: Directly Add code

The Code is as follows:

Var kingwolfofsky = {
/**
* Obtain the coordinates of the input cursor on the page
* @ Param {HTMLElement} element of the input box
* @ Return {Object} returns left and 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_p}', cloneLeft = '{$ cloneLeft}', cloneFocus = '{$ cloneFocus}', cloneRight = '{$ cloneRight }';
Var none = '';
Var p = elem [cloneDiv] | document. createElement ('P'), 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] = p, elem [cloneFocus] = focus;
Elem [cloneLeft] = text;
P. appendChild (text );
P. appendChild (focus );
Document. body. appendChild (p );
Focus. innerHTML = '| ';
Focus.style.css Text = 'display: inline-block; width: 0px; overflow: hidden; z-index:-100; word-wrap: break-word; word-break: break-all ;';
P. className = this. _ cloneStyle (elem );
P.style.css Text = 'visibility: hidden; display: inline-block; position: absolute; z-index:-100; word-wrap: break-word; word-break: break-all; overflow: hidden ;';
};
P. style. left = this. _ offset (elem). left + "px ";
P. style. top = this. _ offset (elem). top + "px ";
Var strTmp = elem. value. substring (0, index). replace (//G, '>'). replace (/\ n/g ,'
'). 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
};
}
},
// Clone element style and return class
_ 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;
},
// Insert a style to the page header
_ 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.css Text + = content) | style. appendChild (document. createTextNode (content ));
},
_ Style :{},
// Obtain the final Style
_ GetStyle: 'getcomputedstyle' in window? Function (elem, name ){
Return getComputedStyle (elem, null) [name];
}: Function (elem, name ){
Return elem. currentStyle [name];
},
// Obtain the cursor position in the text box
_ 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 );
},
// Obtain the position of the element on the page
_ Offset: function (elem ){
Var box = elem. getBoundingClientRect (), doc = elem. ownerDocument, body = doc. body, docElem = doc.doc umentElement;
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 ";
}

Certificate ----------------------------------------------------------------------------------------------------------------------------------------
Call Code:

The Code is as follows:

Var elem = document. getElementById (Control ID );
Var p = kingwolfofsky. getInputPositon (elem );
P. left; // obtain the coordinates of the specified position
P. top; // same as above
P. bottom; // same as above