HTML--在textarea左侧添加行号

原文网址:HTML--在textarea左侧添加行号-CSDN博客

简介

本文介绍HTML在textarea文本框左侧添加行号的方法。

效果

代码

html 复制代码
<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title>textarea测试</title>
    <style>
        .line-number-container {
            display: inline-block;
            padding: 2px 0 2px 1em;
            font-family: monospace;
            color: #999;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            overflow-y: scroll;
            scrollbar-width: none; /* 禁止显示滚动条 */
        }

        .line-number-container::-webkit-scrollbar {
            width: 0; /* 禁止显示滚动条 */
        }

        .container textarea {
            width: 500px;
            height: 200px;
            padding-left: 2em;
            overflow: scroll;
        }
    </style>
</head>

<body>

<div class="container" style="position: relative;">
    <textarea wrap="off"></textarea>
    <div class="line-number-container"></div>
</div>

</body>

<script>
    createLineNumber('.container textarea', '.line-number-container')

    function createLineNumber(textAreaSelector, lineNumberSelector) {
        let textarea = document.querySelector(textAreaSelector);
        let lineNumber = document.querySelector(lineNumberSelector);
        updateLineNumbers();

        textarea.addEventListener("input", updateLineNumbers);
        textarea.addEventListener("scroll", syncScroll);
        lineNumber.addEventListener("scroll", syncContent);

        function updateLineNumbers() {
            let lines = textarea.value.split("\n");
            lineNumber.innerHTML = "";
            for (let i = 0; i < lines.length; i++) {
                let lineNum = document.createElement("div");
                lineNum.textContent = i + 1 + '';
                lineNumber.appendChild(lineNum);
            }

            let widthCount = String(lines.length).length;
            widthCount += 1;
            textarea.style.setProperty('padding-left', widthCount + 'em');
        }

        function syncScroll() {
            lineNumber.scrollTop = textarea.scrollTop;
        }

        function syncContent() {
            textarea.scrollTop = lineNumber.scrollTop;
        }
    }
</script>

</html>
相关推荐
不坑老师4 小时前
macOS、Linux上的WPS终于有不坑盒子了,安装很简单,一行命令完成!
vue.js·html
Good kid.5 小时前
一键部署 Deepseek网页聊天系统(基于 Spring Boot + HTML 的本地对话系统)
spring boot·后端·html
黄毛火烧雪下6 小时前
HTML 的底层原理
前端·html
守正出琦2 天前
带代码示例的 HTML 标签实操手册
前端·html
yume_sibai2 天前
HTML HTML5基础(1)
前端·html·html5
XianZhe_2 天前
Pug 哈巴狗 便捷的HTML预处理器 上
前端·html·pug·html预处理器
yume_sibai2 天前
HTML HTML5基础(2)
前端·html·html5
守正出琦2 天前
HTML 常用标签速查表
前端·javascript·html
小时前端2 天前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4962 天前
Web Components简介及如何使用
前端·javascript·html