在项目中遇到一个问题,在textarea指定位置插入图片,此时需要获取鼠标光标的位置,百度了一波,得到了下面的方法:
代码片段
<textarea id="textarea"
onKeydown="posCursor()"
onKeyup="posCursor()"
onmousedown="posCursor()"
onmouseup="posCursor()"
onfocus="posCursor()"
rows="10">
一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字
</textarea>
let CONFIG = {
TEXTAREA_CURSOR_START: 0,
TEXTAREA_CURSOR_END: 0
}
var isIE = !(!document.all); // document.all-IE返回true 非IE返回false
function posCursor(){
var start=0,end=0;
var oTextarea = document.getElementById("textarea");
if(isIE){
var sTextRange= document.selection.createRange();
if(sTextRange.parentElement()== oTextarea){
var oTextRange = document.body.createTextRange();
oTextRange.moveToElementText(oTextarea);
for (start=0; oTextRange.compareEndPoints("StartToStart", sTextRange) < 0; start++){
oTextRange.moveStart('character', 1);
}
for (var i = 0; i <= start; i ++){
if (oTextarea.value.charAt(i) == '\n'){
start++;
}
}
oTextRange.moveToElementText(oTextarea);
for (end = 0; oTextRange.compareEndPoints('StartToEnd', sTextRange) < 0; end ++){
oTextRange.moveStart('character', 1);
}
for (var i = 0; i <= end; i ++){
if (oTextarea.value.charAt(i) == '\n'){
end++;
}
}
}
}else{
start = oTextarea.selectionStart;
end = oTextarea.selectionEnd;
}
CONFIG.TEXTAREA_CURSOR_START = start;
CONFIG.TEXTAREA_CURSOR_END = end;
}
let textarea_value = $("#textarea-content").val();
console.log("光标位置:", CONFIG.TEXTAREA_CURSOR_START); // 光标位置
console.log("字符串长度:", textarea_value.length);
let textarea_a = textarea_value.substring(0, CONFIG.TEXTAREA_CURSOR_START);
let textarea_b = textarea_value.substring(CONFIG.TEXTAREA_CURSOR_START);
$("#textarea-content").val(textarea_a + '< img src="..." />' + textarea_b);
— 1 2 —