js怎么设置鼠标位置

JavaScript017

js怎么设置鼠标位置,第1张

在前段使用JavaScript开发获取鼠标当前位置来计某个功能,如何获取鼠标当前的位置,其实很多人都不知道怎么做,为此我为大家整理推荐了相关的知识,希望大家喜欢。

js设置鼠标位置的方法

新建一个html代码页面,在这个html页面找到<body>,然后在这个<body>里创建一个用来显示坐标位置的<div>,并给这个<div>添加一个id。如图

创建<div>的代码:

<div id="point-loc"></div>

使用pageX、pageY获取鼠标当前位置。在<title>标签后面新建一个<script>,创建鼠标移动时获取鼠标当前的位置。如图:

js代码:

<script type="text/javascript">

document.onmousemove = function(e){

var loc = "当前位置 x:"+e.pageX+",y:"+e.pageY

document.getElementById("point-loc").innerHTML = loc

}

</script>

保存html后使用浏览器打开即可看到效果。如图:

4页面所有代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js获取鼠标位置</title>

<script type="text/javascript">

document.onmousemove = function(e){

var loc = "当前位置 x:"+e.pageX+",y:"+e.pageY

document.getElementById("point-loc").innerHTML = loc

}

</script>

</head>

<body>

<div id="point-loc"></div>

</body>

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

当编辑区没有获得焦点或光标处range为空时,点击加粗按钮,在光标处添加一个strong标签,之后把光标移动到strong标签内,现在在移动光标的过程出现了问题。

var frag = range.createContextualFragment(“<strong></strong>”)

var lastNode = frag.lastChild

range.insertNode(frag)

range.setStartAfter(lastNode)

?

这里添加的strong标签是空,如果strong里加入一个 就可以获得lastChild,但现在它的lastChild是null,这样在setStartAfter时就找不到参照的lastNode对象了。

这里该如何创建空strong标签,或如何获取strong下参照节点。收起

点击加粗按钮后,在编辑区添加一个strong标签,把光标移动到strong内,继续输入时直接到strong内

如果strong内部有节点,比如文本或标签,那么frag.lastChild就会获得最后一个标签或文本节点,假设创建的是这样的标签

<strong>nbsp</strong>

那执行insertNode后插入的html将是

光标<strong>nbsp</strong>

继续输入的话,文字会出现在strong标签前而不是内部,也就不是加粗的,所以要调整光标位置,执行setStartAfter(lastNode)

也就是把光标设置到lastNode也就是之后,html变成

<strong>nbsp光标</strong>