jquery 或者js 获取页面光标所在的元素有如下两种方式:
1.通过焦点获取光标所在元素
光标所在一般都在文本框里面(该方法只适用于input,textarea)
$("input:focus") //光标所在input元素的位置$("textarea:focus")//光标所在textarea元素的位置
$("input:focus,textarea:focus")//光标所在元素的位置
2。通过点击事件获取光标所在元素
获取鼠标点击元素的位置(适用于所有元素)
$("*").click(function(e){$(e.target)//光标所在元素位置
})
1、获取光标位置
function getCursortPosition (ctrl) {//获取光标位置函数
var CaretPos = 0 // IE Support
if (document.selection) {
ctrl.focus ()
var Sel = document.selection.createRange ()
Sel.moveStart ('character', -ctrl.value.length)
CaretPos = Sel.text.length }
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos =ctrl.selectionStart
return (CaretPos) }
2.设置光标位置
function setCaretPosition(ctrl, pos){//设置光标位置函数
if(ctrl.setSelectionRange) {
ctrl.focus()
ctrl.setSelectionRange(pos,pos)
} else if (ctrl.createTextRange){
varrange = ctrl.createTextRange()
range.collapse(true)
range.moveEnd('character', pos)
range.moveStart('character', pos)
range.select()
}
}
3、将光标移动到输入框
ctrl.focus()代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取鼠标在Canvas中的坐标位置</title>
<style>
#canvas{
border:1px solid #ccc
width:300px
height:300px
overflow:hidden
}
</style>
<script>
function get_canvas(ev,obj){
m_clientX = ev.clientX-obj.offsetLeft
m_clientY = ev.clientY-obj.offsetTop
document.getElementById("tips").innerHTML = "当前坐标:X:"+ m_clientX + " ,Y:" +m_clientY
}
</script>
</head>
<body>
<div id="tips"></div>
<div id="canvas" onmousemove="get_canvas(event,this)"></div>
</body>
</html>
兼容IE8+
用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同。
参考资料
首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解.脚本之家[引用时间2018-1-18]