我正在处理带有行号的textarea。现在我发现了一个很棒的小脚本。 http://jakiestfu.github.io/Behave.js/
在这里演示:http://jakiestfu.github.io/Behave.js/examples/example-hook-linenums.html
我缺少的一个功能是能够启用换行。
当然我可以将wrap="on"
添加到textarea,这确实提供了包装,但线号被搞砸了。
我知道如何添加对包装whist的支持以保持行号正确吗?
答案 0 :(得分:0)
试试这个:
<!DOCTYPE html>
<html>
<body onload="keyDown()">
<div class="container" style="width:300px;">
<div id="numbers" style="float:left; background:gray; width:20px;"></div>
<textarea onkeypress="keyDown()" rows="1" style="line-height:20px; display:block; float:right; overflow:hidden;" id="ta"></textarea>
</div>
<script type="text/javascript">
function keyDown(){
var taLineHeight = 20; // This should match the line-height in the CSS
var taHeight = ta.scrollHeight; // Get the scroll height of the textarea
ta.style.height = taHeight + "px"; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
var numberOfLines = Math.floor(taHeight/taLineHeight);
var inner= "";
for(var i=1; i<=numberOfLines; i++)
inner += "<div>"+i+"</div>";
document.getElementById("numbers").innerHTML = inner;
}
</script>
</body></html>