限制可以使用 textarea 写入的行数

Question

我不仅要限制在文本区域中可以按下 enter 的次数，还要停止超过两行的输出。为了更好地解释，我有一个相框设计师 here。在选项中，您可以输入文本，它会出现在框架上。目前，如果您尝试在文本区域中按 Enter 超过 2 次，它不会让您这样做。当文本太长并自动换行时出现问题。

这是一些相关代码。

$(document).ready(function(){        
    var lines = 2;
    var linesUsed = $('#linesUsed');

    $('#input').keydown(function(e) {
        newLines = $(this).val().split("\n").length;
        linesUsed.text(newLines);
        if(e.keyCode == 13 && newLines >= lines) {
            return false;
        }
    });
});

这是一些 jquery 限制 TEXTAREA 中的行数的内容。

和文本区域

<textarea id="input" maxlength="40" name="Text" value="Max. 40 characters"></textarea>

从文本区域打印输入的jquery

$('#input').keyup(function() {
    $('#text').html($(this).val());
});

这是我的 svg 中嵌入的 html，其中打印了键入的文本。

<foreignObject x="135" y="520" width="600" height="260" style="color:white;text-align:center">
    <body xmlns="http://www.w3.org/1999/xhtml">
        <div id="container2">
            <p id="text">Your words here</p>
        </div>
    </body>
</foreignObject>

Answer 1

这里有 2 个 javascript 库可以帮助您解决这个问题：

正如您在演示站点上看到的那样，这两种解决方案都有效。

Answer 2

可以使用属性 wrap=off 来防止文本区域中的自动换行，该属性是非标准的，但自 HTML 早期以来得到广泛支持。

<textarea id="input" maxlength="40" name="Text"
placeholder="Max. 40 characters" wrap="off"></textarea>

（我已将 value 属性更改为 placeholder 属性。value 属性对 textarea 无效。）

另一种可能更好的方法是使用两个 input type=text 字段而不是一个 textarea 字段来避免此问题。那么你就不需要 JavaScript 来防止输入多于两行，但是如果需要限制字符总数（而不是仅仅在每行上设置限制），你需要简单的 JavaScript为此。

限制可以使用 textarea 写入的行数

Limit number of lines able to write with textarea

javascript

jquery

html

svg