jquery 或者js 怎么获取页面光标所在的元素

JavaScript016

jquery 或者js 怎么获取页面光标所在的元素,第1张

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]