javascript - 限制可以使用文本区域写入的行数

标签 javascript jquery html svg

我不仅想限制在文本区域中按下 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;
        }
    });
});

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

和文本区域

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

最佳答案

可以使用属性 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。

关于javascript - 限制可以使用文本区域写入的行数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27836262/

相关文章:

html - 两个并排的div,一个居中,另一个的高度取决于第一个

javascript - 如何重用JavaScript函数以避免重复相同的代码行?

javascript - 查找已选中复选框的顺序

javascript - 如何在 Mobile Safari 中为 <video> 获取 Javascript 中的位置更改事件?

javascript - 无法在 jquery javascript 中转义字符

javascript - 输入焦点后触发主页按钮

javascript - 如何使用正则表达式在 javascript 中的另一个单词之后提取单词?

javascript - 如何从 jquery 对话框中添加和删除表

javascript - 如何在 django 中包含项目根目录外部的静态文件

html - 单选按钮 css 上的背景图像