关键字提示编辑器二

喜欢ヅ旅行 2022-12-23 11:19 139阅读 0赞

做了一些改进。  
当前行无内容时，隐藏提示框。  
存在的问题，如果某一行的文字过多，则会自动换行，但是这种换行只是在视觉上的，html代码中没有体现。所以可能会导致高度计算不够。  
效果：  
![效果][20201124220219869.gif_pic_center]  
index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div提示框跟随光标移动</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="editorDiv" contenteditable="true" oninput="handleInput(this)" class="editorDiv" style="font-family: 黑体;font-size: 20px"></div>
        <div>
            <span id="fakeContent"></span>
        </div>
        <div id="info" class="info">Demo</div>
    <script src="index.js"></script>
    </body>
    </html>

index.css

* {
        
        margin: 0;
        padding: 0;
    }
    .editorDiv {
        
        width: 340px;
        height: 210px;
        color: #606266;
        resize:vertical;
        overflow: hidden;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        margin: 50px;
        padding: 20px;
    }
    .editorDiv:focus {
        
        border:1px solid #409EFF;
        outline: none;
    }
    .info {
        
        width: 47px;
        height: 20px;
        position: absolute;
        border:1px solid crimson;
        top: 0;
        left: 0;
        display: none;
    }
    #fakeContent  {
        
        visibility: hidden;
        display: inline-block;
        background-color: #409EFF;
    }

index.js

let editorDiv = document.querySelector('#editorDiv');
    let fakeContent = document.querySelector('#fakeContent');
    let info = document.querySelector('#info');
    
    /**
     * 输入事件
     * */
    function handleInput(that) {
        
        info.style.display = 'inherit';
        const parentOffset = getParentOffset();
        const cursorCoordinate = getCursorCoordinate(that);
        //文本数组，div每一行都是一个string
        const  contentStrList = getNodeList(that).map(node => node.textContent);
        //光标y坐标也就是contentStrList的索引
        if(cursorCoordinate.x === 0) {
        
            info.style.display = 'none';
            return;
        }
        const y = cursorCoordinate.y;
        //按照光标偏移量截取字符串
        fakeContent.textContent = contentStrList[y].substr(0,cursorCoordinate.x);
        const fakeContentStyle = getComputedStyle(fakeContent,null);
        info.style.left = (parseFloat(fakeContentStyle.width)+parentOffset.leftOffset)+'px';
        info.style.top = ((y+1)*parseFloat(fakeContentStyle.height)+parentOffset.topOffset)+'px';
    }
    
    /**
     * 获取div内容并转为Node数组
     * @param elem
     * @returns {ChildNode[]}
     */
    function getNodeList(elem) {
        
        return Array.from(elem.childNodes);
    }
    
    /**
     * 获取光标的坐标
     * @param elem
     * @returns {
        {x: number 光标偏移量, y: number 光标在div子元素数组中的索引}}
     */
    function getCursorCoordinate(elem) {
        
        const selection = window.getSelection();
        const cursorIndex = getNodeList(elem).findIndex(node =>
            node.firstChild === selection.anchorNode|| node === selection.anchorNode);
        const cursorOffset = selection.anchorOffset;
        return {
        
            x: selection.anchorOffset,
            y: cursorIndex
        }
    }
    
    /**
     * 克隆字体和字号
     * @param src
     * @param dest
     */
    function cloneFont(src,dest) {
        
        let srcStyle = getComputedStyle(src);
        dest.style.fontFamily = srcStyle.fontFamily;
        dest.style.fontSize  = srcStyle.fontSize;
    }
    
    /**
     * 获取div编辑框编辑区域左上角距离屏幕可视区域的偏移量
     * @returns {
        {topOffset: number, leftOffset: number}}
     */
    function getParentOffset() {
        
        let boundingClientRect = editorDiv.getBoundingClientRect();
        let computedStyle = getComputedStyle(editorDiv,null);
        return {
        
            leftOffset: boundingClientRect.left+parseFloat(computedStyle.paddingLeft)+parseFloat(computedStyle.borderLeftWidth),
            topOffset: boundingClientRect.top+parseFloat(computedStyle.paddingTop)+parseFloat(computedStyle.borderTopWidth)
        }
    }
    
    cloneFont(editorDiv,fakeContent);

[20201124220219869.gif_pic_center]: /images/20221120/0c36daa1f27842379bd4477313a9a4ce.png

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关 18. Typescript - 提示与技巧 - 推断关键字

今天我讲的是infer关键字。有时，我们需要获取数组的值类型或获取函数的返回类型。为此，我需要引入 infer 关键字。为了解释此功能，我向您展示了一个示例

灰太狼/ 2024年03月16日 12:46/ 0 赞/ 20 阅读

相关搜索引擎关键字智能提示的一种实现

问题背景搜索关键字智能提示是一个搜索应用的标配，主要作用是避免用户输入错误的搜索词，并将用户引导到相应的关键词上，以提升用户搜索体验。美团CRM系统中存在数以百万计

た入场券/ 2023年10月17日 19:57/ 0 赞/ 12 阅读

相关 Python笔记（二）-标识符、关键字

1、标识符（1）定义的变量名、函数名、类名等（2）由字母、数字、下划线组成，且不能以数字开头（3）不能与关键字重名（4）不要与内置函数或类重名，否则会覆盖原有内

末蓝、/ 2023年08月17日 17:04/ 0 赞/ 160 阅读

相关 UEditor编辑器增加placeholder提示

var source = UE.getEditor('source'); UE.Editor.prototype.placeholder = f

偏执的太偏执、/ 2023年06月28日 04:54/ 0 赞/ 42 阅读

相关 webstrom vue，jq关键字提示如何设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xY

﹏ヽ暗。殇╰゛Y/ 2022年12月26日 10:11/ 0 赞/ 150 阅读

相关关键字提示编辑器二

做了一些改进。当前行无内容时，隐藏提示框。存在的问题，如果某一行的文字过多，则会自动换行，但是这种换行只是在视觉上的，html代码中没有体现。所以可能会导致高度计算

喜欢ヅ旅行/ 2022年12月23日 11:19/ 0 赞/ 140 阅读

相关关键字提示编辑器一之可编辑div获取光标位置

没有考虑浏览器兼容性，暂时只考虑了Chrome。效果 ![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

﹏ヽ暗。殇╰゛Y/ 2022年12月23日 06:18/ 0 赞/ 210 阅读

相关 C# textBox关键字查询数据库智能提示

有时候由于项目需求的需要，需要实现像百度那样输入关键字后有下拉框提示，在网上搜了下，一种是利用ComboBox和TextBox的AutoCompleteMode属性，个人感觉不

比眉伴天荒/ 2022年09月18日 03:54/ 0 赞/ 233 阅读

相关 ajax实现搜索提示功能（关键字自动匹配功能）

大家都使用过google或者xunlei的搜索，输入关键字后可以出现相关提示，是个不错的功能，今天就在这里给大家把我的拙作给大家分享截图：效果页面：http://www.xqb

拼搏现实的明天。/ 2022年08月27日 05:57/ 0 赞/ 258 阅读

相关 JavaScript -- 搜索引擎的关键字提示功能（字典树）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3Rf

布满荆棘的人生/ 2022年02月20日 18:13/ 0 赞/ 260 阅读