HTML--在textarea左侧添加行号

简介

本文介绍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>