当前位置：首页 > news >正文

HTML--在textarea左侧添加行号

news 2025/10/5 5:45:11

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

简介

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

效果

代码

<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>

查看全文

http://www.dtcms.com/a/441928.html