首页给我一个带行号的文本输入框，行号自动递增，并美化背景的html代码

给我一个带行号的文本输入框，行号自动递增，并美化背景的html代码

时间: 2023-06-27 16:04:58 浏览: 56

以下是一个带行号的文本输入框，行号自动递增，并美化背景的html代码： ```html <!DOCTYPE html> <html> <head> <title>带行号的文本输入框</title> <style> textarea { font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 20px; padding: 10px; border: none; background-color: #f5f5f5; resize: none; width: 100%; height: 100%; box-sizing: border-box; } .line-numbers { display: inline-block; text-align: right; margin-right: 10px; color: #ccc; user-select: none; } </style> </head> <body> <div style="position: relative;"> <div class="line-numbers"></div> <textarea id="myTextarea" onscroll="updateLineNumbers()"></textarea> </div> <script> function updateLineNumbers() { var lines = document.getElementById("myTextarea").value.split("\n").length; var lineNumbersDiv = document.getElementsByClassName("line-numbers")[0]; lineNumbersDiv.innerHTML = ""; for (var i = 1; i <= lines; i++) { lineNumbersDiv.innerHTML += i + "<br>"; } } </script> </body> </html> ``` 在这个示例中，我们使用了一个 `textarea` 元素作为文本输入框，并使用了 `Courier New` 字体和 `14px` 字号来模拟代码编辑器的效果。我们使用了一个 `line-numbers` 类来表示行号，并将其放在了 `textarea` 的左侧。通过 `updateLineNumbers` 函数，我们可以在滚动文本区域时自动更新行号。在样式中，我们还设置了一些其他的属性，如 `padding`、`background-color`、`resize` 等，以使文本输入框看起来更加美观。请注意，此示例中的代码并不完整，只是为了演示带行号的文本输入框的实现方法。你可以根据自己的需要进行修改和扩展。