获取div光标并插入图片

//显示图片
function showImage(div_id,img_src) {
//IE support
if (document.selection) {
var myField = document.getElementById(div_id); //对象
var myValue = '<img src = "'+img_src+'"/>'; //值
myField.focus();
var sel = document.selection.createRange();
sel.pasteHTML(myValue);
}else {
var sel = div_range;
if(sel == null || sel == 'undefined'){
myfocus(div_id);
sel = document.getSelection().getRangeAt(0);
}
var img = document.createElement("img");
img.src = img_src;
sel.insertNode(img);
}
}
var div_range;
function divOnmouseout(){
var sel = document.getSelection();
if(sel){//ff,ch
div_range = sel.getRangeAt(0);
}

//获取焦点
function myfocus(obj) {
if (typeof obj == 'string') obj = document.getElementById(obj);
obj.focus();
if (obj.createTextRange) {//ie
var rtextRange = obj.createTextRange();
if(obj.value == null || obj.value == '') return;
rtextRange.moveStart('character', obj.value.length);
rtextRange.collapse(true);
rtextRange.select();
}else if (obj.selectionStart){//chrome "<input>"、"<textarea>"
obj.selectionStart = obj.value.length;
}else if(window.getSelection){
var sel = window.getSelection();
var tempRange = document.createRange();
if(obj.firstChild == null || obj.firstChild == '') return;
tempRange.setStart(obj.firstChild, obj.firstChild.length);
sel.removeAllRanges();
sel.addRange(tempRange);
}
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中获取`div`元素的光标位置,可以使用`Selection`对象和`Range`对象。下面是一个示例: 首先,在Vue组件的模板中,给`div`元素添加一个`ref`属性: ```html <template> <div ref="myDiv" contenteditable="true" @mouseup="handleMouseUp"></div> </template> ``` 然后,在Vue组件的方法中,定义一个`handleMouseUp`方法来处理鼠标抬起事件。在该方法中,可以通过`window.getSelection()`获取光标的位置,并使用`Range`对象获取光标相对于`div`元素的偏移量: ```javascript <script> export default { methods: { handleMouseUp() { const selection = window.getSelection(); const range = selection.getRangeAt(0); const divOffset = this.$refs.myDiv.getBoundingClientRect(); const { top, left } = range.getBoundingClientRect(); const cursorOffset = { top: top - divOffset.top, left: left - divOffset.left }; console.log('光标位置:', cursorOffset); } } } </script> ``` 在上述示例中,当鼠标在`div`元素上抬起时,会触发`handleMouseUp`方法。该方法获取当前光标位置的`Range`对象,并计算光标相对于`div`元素的偏移量。最后,将光标位置输出到控制台。 请注意,上述示例仅适用于在鼠标抬起时获取光标位置。如果需要实时追踪光标位置的变化,可能需要在其他事件(如键盘事件、鼠标移动事件)中监听并更新光标位置。另外,还需要考虑光标在不同元素之间移动时的情况。 如果需要在特定的时机获取光标位置,可以根据具体需求调整事件和方法的绑定方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值