js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器

要获得指定控件输入光标的坐标，我们可以使用以下步骤：

1. 获取页面中的指定控件对象
2. 获取控件对象相对于页面左上角的位置
3. 获取控件中光标的位置
4. 将相对位置和光标位置相加，计算出光标在页面中的实际位置

以下是具体的实现步骤：

1.获取页面中的指定控件对象

我们可以使用document.getElementById方法获取指定id值的控件对象。例如，我们要获取id为txtInput的文本框对象，可以使用以下代码：

var txtInput = document.getElementById('txtInput');

2.获取控件对象相对于页面左上角的位置

我们可以使用Element.getBoundingClientRect()方法获取指定元素的相对于视口的位置大小信息。这个API返回一个DOMRect对象，里面包含了top、left、right和bottom四个属性，可以分别获取元素的上下左右边缘在视口中的位置，以及元素的宽度和高度。

var rect = txtInput.getBoundingClientRect();
var left = rect.left;
var top  = rect.top;

为了兼容不同浏览器，我们可以使用以下代码获取元素相对于页面的位置：

var left = document.documentElement.scrollLeft + rect.left;
var top  = document.documentElement.scrollTop + rect.top;

3.获取控件中光标的位置

要获取控件中光标的位置，我们可以使用Selection对象和Range对象。 Selection对象代表用户选择的文本范围或插入符号的位置。 Range对象则代表文档中的一段连续的区域。

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var cursorOffset = range.startOffset;

在这个例子中，我们假设用户只选中了控件中的一段文本，因此我们可以使用getRangeAt(0)方法，获取一个表示光标位置的Range对象。 然后使用startOffset属性，获取光标相对于文本区域起始位置的偏移量。如果用户没选中任何文本，那么我们需要手动计算光标的位置。

4.将相对位置和光标位置相加，计算出光标在页面中的实际位置

最后，我们将相对位置和光标位置相加，就可以得到光标在页面中的实际位置。也就是说，我们需要在第2步代码的基础上，再添加以下代码即可：

var cursorLeft = left + txtInput.offsetWidth;
var cursorTop = top + range.getBoundingClientRect().top;

这里，offsetWidth可以获取到控件的宽度，而getBoundingClientRect().top可以获取到光标距离控件上边缘的距离。

以下是一个完整的例子：

<input id="txtInput" type="text" value="hello, world!">

<script>
var txtInput = document.getElementById('txtInput');

var rect = txtInput.getBoundingClientRect();
var left = document.documentElement.scrollLeft + rect.left;
var top  = document.documentElement.scrollTop + rect.top;

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var cursorOffset = range.startOffset;

var cursorLeft = left + txtInput.offsetWidth;
var cursorTop = top + range.getBoundingClientRect().top;

console.log(cursorLeft, cursorTop);
</script>

这个例子输出的结果是光标在页面中的实际位置。