Question

我正在处理带有行号的textarea。现在我发现了一个很棒的小脚本。 http://jakiestfu.github.io/Behave.js/

在这里演示：http://jakiestfu.github.io/Behave.js/examples/example-hook-linenums.html

我缺少的一个功能是能够启用换行。

当然我可以将wrap="on"添加到textarea，这确实提供了包装，但线号被搞砸了。

我知道如何添加对包装whist的支持以保持行号正确吗？

Answer 1

试试这个：

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

Textarea上的JQuery行号和包装支持

1 个答案: