JS获取鼠标光标位置
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100px;
height: 100px;
border: 1px solid #ccc;
overflow: auto;
}
.lis {
height: 20px;
}
</style>
</head>
<body>
<p>
<input
class="input"
id="textbox"
name="textbox"
value="Hi,www.jb51.net!!!"
/>
</p>
<input
type="button"
onclick="alert( getPositionForInput( document.getElementById('textbox') ) )"
value="Get Position"
/>
<input type="text" id="no1" size="1" /><input
type="button"
onclick="process('no1','textbox');"
value="Set Position"
/>
<textarea
id="zhangdanNum"
name="zhangdanNum"
style="height: 66px; width: 246px; overflow: hidden"
>
Hi,CssRain!!!</textarea
>
<input
type="button"
onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )"
value="Get Position"
/>
<input type="text" id="no2" size="1" /><input
type="button"
onclick="process('no2','zhangdanNum');"
value="Set Position"
/>
<script>
function getPositionForInput(ctrl) {
var CaretPos = 0;
if (document.selection) {
// IE Support
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart("character", -ctrl.value.length);
CaretPos = Sel.text.length;
} else if (ctrl.selectionStart || ctrl.selectionStart == "0") {
// Firefox support
CaretPos = ctrl.selectionStart;
}
return CaretPos;
}
function getPositionForTextArea(ctrl) {
var CaretPos = 0;
if (document.selection) {
// IE Support
ctrl.focus();
var Sel = document.selection.createRange();
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(ctrl);
var CaretPos = -1;
while (Sel2.inRange(Sel)) {
Sel2.moveStart("character");
CaretPos++;
}
} else if (ctrl.selectionStart || ctrl.selectionStart == "0") {
// Firefox support
CaretPos = ctrl.selectionStart;
}
return CaretPos;
}
function setCursorPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select();
}
}
function process(id, targetId) {
var no = document.getElementById(id).value;
setCursorPosition(document.getElementById(targetId), no);
}
</script>
</body>
</html>
标签：Sel,鼠标,ctrl,CaretPos,JS,selectionStart,var,document,光标 来源： https://blog.csdn.net/weixin_45580774/article/details/115295925