zoukankan      html  css  js  c++  java
  • 获取光标位置

    原文:https://blog.csdn.net/mafan121/article/details/78519348

    html

    <iframe id="editor"  width="600px" height="400px" style="border:solid 1px;"></iframe>
    <input type="txt" onclick="alert(getPosition(event.target))"/>

    js

        //初始化编辑器
        function init() {
            var ifr = document.getElementById("editor");
            var doc = ifr.contentDocument || ifr.contentWindow.document; // W3C || IE
            doc.open();
            doc.designMode="on";
            doc.contentEditable = true;
            doc.write('<html><head><style>body{margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body>GoodNessEditor</body></html>');
            doc.close();
            console.log(doc.body.innerHTML);
            doc.addEventListener('click',function(e){
                alert(getDivPosition(e));
            });
        }
        init();
        //可编辑div获取坐标
        var getDivPosition = function (event) {
            var element = event.target ?  event.target : event;
            var caretOffset = 0;
            var doc = element.ownerDocument || element.document;
            var win = doc.defaultView || doc.parentWindow;
            var sel;
            if (typeof win.getSelection != "undefined") {//谷歌、火狐
                sel = win.getSelection();
                if (sel.rangeCount > 0) {//选中的区域
                    var range = win.getSelection().getRangeAt(0);
                    var preCaretRange = range.cloneRange();//克隆一个选中区域
                    preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点
                    preCaretRange.setEnd(range.endContainer, range.endOffset);  //重置选中区域的结束位置
                    caretOffset = preCaretRange.toString().length;
                }
            } else if ((sel = doc.selection) && sel.type != "Control") {//IE
                var textRange = sel.createRange();
                var preCaretTextRange = doc.body.createTextRange();
                preCaretTextRange.moveToElementText(element);
                preCaretTextRange.setEndPoint("EndToEnd", textRange);
                caretOffset = preCaretTextRange.text.length;
            }
            return caretOffset;
        }
        //输入框获取光标
        var getPosition = function (event) {
            var element = event.target ?  event.target : event;
            let cursorPos = 0;
            if (document.selection) {//IE
                var selectRange = document.selection.createRange();
                selectRange.moveStart('character', -element.value.length);
                cursorPos = selectRange.text.length;
            } else if (element.selectionStart || element.selectionStart == '0') {
                cursorPos = element.selectionStart;
            }
            return cursorPos;
        }
  • 相关阅读:
    后端程序员必备的 Linux 基础知识+常见命令(近万字总结)
    信息收集流程
    在不影响程序使用的情况下添加shellcode
    使用Zolom内存解析运行python脚本(不落地)
    要点3:输入函数对比与自定义输入方式
    要点2:循环、条件控制
    对等连接和云联网
    上传自定义镜像到腾讯云
    Windows 激活
    MySQL错误(报错)一览表(对照表)
  • 原文地址:https://www.cnblogs.com/bruce-gou/p/9882892.html
Copyright © 2011-2022 走看看