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

JavaScript0318

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()

首先要实现输入内容不同颜色是可以实现的,比如使用一个可编辑iframe就可以了,textarea是不行的。

至于功能的实现,我觉得不需要获取结束位置。

首先检测鼠标事件,如果有点击编辑区的某个位置,你就获取当前鼠标的落点,然后用innerHTML加入一对标签,<span class="color:#XXXXXX"></span>,所有输入内容都在这个span中间。效果就是输入的所有文字都变色。

不知道楼主明白没?