Question

HTML代码

<textarea id="t1" class="txt" rows="5" cols="50" maxlength="250"></textarea>

输出

Screenshot of textbox result

在上面的文字区域插入文字后，我得到了这个滚动条，如红圈所示。

我需要一个具有以下限制的文本区域：

最大长度250个字符或最多5行。
每行最多字符为50个字母
将禁用复制功能，并将maxlength定义为250

我尝试了以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type="text/javascript">
            function limitlength(obj, length) {
                var maxlength = length
                if (obj.value.length > maxlength)
                    obj.value = obj.value.substring(0, maxlength)
            }
            function CountChars(ID) {
            }

        </script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
        <style>
            #TextBox2 {
                resize: none;
            }
            input, textarea{  
                font-family: Arial, sans-serif;
                font-size: 100%;
                width: 26em; /* fallback for the next one, for browsers not recognizing ch */
                width: 40ch; /* sets the width to 40 times the width of the digit “0” */
            }
        </style>
    </head>
    <body>
        <div id="sampleArea">dasdasdasdasd</div>

        <textarea id="TextBox2" class="txt" rows="20" cols="5" onkeypress="return limitlength(this, 20)"></textarea>

    </body>

</html>

我也试过这个

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <script type="text/javascript">
    function CountChars(ID) {
    var i, limit = 35, lines = [], result = '', currentLine = '';
    var textBox = document.getElementById('TextBox2');
    var text = textBox.value;
    var words = text.split(' ');

    for (i = 0; i < words.length; i++) {
        var extendedLine = currentLine + ' ' + words[i];
        if (extendedLine.length > limit) {
            lines.push(currentLine);
            currentLine = words[i];
        } else {
            currentLine = extendedLine;
        }
    }

    if (currentLine.length > 0) {
        lines.push(currentLine);
    }


    for (i = 0; i < lines.length; i++) {
        result += lines[i] + '\r\n';
    }

    textBox.value = result;
    }

</script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<style>
    #TextBox2 {
    resize: none;
}
</style>
    </head>
    <body>
        <div id="sampleArea">dasdasdasdasd</div>

        <textarea id="TextBox2" class="txt" rows="20" cols="35" onkeyup="CountChars(this);"></textarea>

    </body>

</html>

Answer 1

你可以尝试溢出自动或隐藏，像这样

<textarea style="overflow:auto"></textarea>

<textarea style="overflow:hidden"></textarea>

具有固定字符限制和行限制的textarea

1 个答案: