javascript - 有没有办法限制文本区域(javascript/jQuery)中每行的字符数？

Question

有没有办法限制文本区域中每行的字符数？例如，在 textarea 的第 1-3 行中，只允许使用 20 个字符，但之后的行允许使用 50 个字符。

textarea 的构造方式，我只能通过改变宽度来限制每行大约相同数量的字符(因为它是一个盒子的形状)。我不确定是否可以限制每行不同数量的字符。

我问这个是因为我在文本区域的顶部有一个图像，当用户输入内容时，文本位于图像绝对定位的部分下方。除非可以在文本区域内 float 图像？ :?

Answer 1

使用 JavaScript 解决此问题的技巧

当然可以，如果您使用 JavaScript。使用 jQuery 查看以下代码片段:

var result = jQuery('#result');
var my_textarea = jQuery('#mytext');
my_textarea.on('keyup', function(event){
    var el = jQuery(this);
    var lines = el.val().split('\n').length;
    var chars = el.val().split('').filter(function(v){
        return v != '\n';
    }).length;
    result.html('You have ' + lines + ' lines and ' + chars + ' chars');
});

(演示在这里:http://jsfiddle.net/tadeck/8krTv/1/)

它计算行数和字符数，计算每行字符数和禁用在特定行中添加更多字符的能力没有问题。

图像位于文本区域内

您说在 textarea 中定位图像可以解决问题。当然，您也可以这样做 - 一种解决方案是将图像作为文本区域的背景，然后从您希望它出现的一侧修正填充，这样文本就不会溢出图像。