JQuery Lined TextArea大小调整问题

JQuery Lined TextArea resizing issue

本文关键字：调整 问题 Lined TextArea JQuery      更新时间：2023-09-26

好吧，这是我的问题：

  • 我正在使用JQuery Lined TextArea插件
  • 我希望文本区域覆盖所有浏览器窗口区域（全宽、全高）
  • 我希望即使调整浏览器窗口的大小，行号也能传播

这是我的HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="jquery.min.js"></script>
        <script src="jquery-linedtextarea.js"></script>
    </head>
    <body>
        <textarea id="tv">
            Some sample text
        </textarea>
        <script>
            $(function() {
                $("#tv").linedtextarea();
            });
        </script>
    </body>
</html>

这是我的CSS：

body
{
    margin:0;
    padding:0;
}
*:focus {outline:0px none transparent;}
textarea
{
    border:0;
    margin:0;
    width:100%;
    height:100%;
    font-family:Courier, "Courier New";
    font-size:12px;
}
/* Following lines taken directly from Demo */
.linedwrap {
    border: 1px solid #c0c0c0;
}
.linedtextarea {
    padding: 0px;
    margin: 0px;
}
.linedtextarea textarea, .linedwrap .codelines .lineno {
    font-size: 10pt;
    font-family: monospace;
    line-height: normal !important;
}
.linedtextarea textarea {
    padding-right:0.3em;
    padding-top:0.3em;
    border: 0;
}
.linedwrap .lines {
    margin-top: 0px;
    width: 50px;
    float: left;
    overflow: hidden;
    border-right: 1px solid #c0c0c0;
    margin-right: 10px;
    background:#DDD;
}
.linedwrap .codelines {
    padding-top: 5px;
}
.linedwrap .codelines .lineno {
    color:#AAAAAA;
    padding-right: 0.5em;
    padding-top: 0.0em;
    text-align: right;
    white-space: nowrap;
}
.linedwrap .codelines .lineselect {
    color: red;
}

有什么想法吗？

在您的文件中尝试这个jquery代码：

<script>
    $(function() {
    $("#tv").width(window.screen.width);//widht of parent element of textarea
    $("#tv").height(window.screen.height);//height of parent element of textarea
        $("#tv").linedtextarea(
        {selectedLine: 1}
    );
    });
</script>

我使用以下方法来解决（非常相似的）问题。可能不优雅，但它起作用了。

$(window).on('resize', function(){
    // Grab the current textarea
    var $textArea = $("#tv");
    // And the text in it
    var $text =  $textArea.val();
    // Work out the parent of the original textarea, without all the lined containers
    var $parent = $("#tv").parent().parent().parent();
    // Get selection to restore later
    var start = $textArea[0].selectionStart;
    var end = $textArea[0].selectionEnd;
    // Get rid of the lined textarea
    $("#tv").parent().parent().remove();
    // Create a new textarea
    $parent.append("<textarea id='tv'></textarea>");
    // Grab a reference to the new textarea
    $textArea = $("#tv");
    // Restore the contents
    $textArea.val($text);
    // Set the height of the new textbox to fill it's parent
    $textArea.height($textArea.parent().parent()[0].clientHeight);//height of parent element of textarea
    // Line it up
    $textArea.linedtextarea();      
    // Can't remember if this is required...
    $textArea = $("#tv");
    // Set up selection
    $textArea[0].selectionStart = start;
    $textArea[0].selectionEnd = end;
    // Optionally... focus teh textbox
    $textArea.focus();
});
// Set original height to fit parent
$("#tv").height($("#tv").parent().parent()[0].clientHeight);//height of parent element of textarea
$("#tv").linedtextarea(
    {selectedLine: 1}
);
相关文章：