Question

我有一个带有textarea的Drupal webform，我想在选择一个选项时限制每行的行和字符，与textarea相关。

例如，用户选择选项A，textarea应限制为2行，每行14个字符。选项B，3行，18个字符。等等。

我似乎无法通过hook_form_alter与webform进行交互，以便为javascript回调向textarea添加属性。我认为这是我的第一个问题。不过我能用jQuery做到这一点。

$(document).ready(function() {

$('#mytext').keyup(function() {
    var v = $(this).val();
    var vl = v.replace(/(\r\n|\n|\r)/gm, "").length;
    if (vl == 0) {
        count = 1;
    }
    if (parseInt(vl / count) == chars) {
        $(this).val(v + '\n');
        count++;
    }

    if (count > 3) {
       var text = $('#mytext').val();
       var lines = text.split('\n');

       var test = implode('\n', lines);
        alert(test);
    }

});
});

另外，如何计算每行的行数和字符数，如果符合限制则阻止任何输入？

我从这里借用了上述部分内容：

Characters per line and lines per textarea limit

Answer 1

这会将textarea限制为每行3个字符。更改chars以增加每行的字符数。

var count = 1;
var chars = 3;
$('#mytext').keyup(function() {
    var v = $(this).val();
    var vl = v.replace(/(\r\n|\n|\r)/gm, "").length;
    if (vl == 0) {
        count = 1
    }
    if (parseInt(vl / count) == chars) {
        $(this).val(v + '\n');
        count++;
    }

});

检查http://jsfiddle.net/7jVrT/

处的工作示例

Answer 2

这不是正确的javascript，但它会给你一个良好的开端我想。你必须真正修补逻辑，以确保你保持第1行逻辑与第2行逻辑等分开。此外，你可以使用event.which来确定按下了哪个键。除了按键事件之外，您可以尝试使用在textarea中输入字符之前发生的keydown事件：

$(document).ready(function(){
    $('#myTextarea').keypress(function(event){
        var text = $('#myTextarea').val();
        var lines = text.split('\n');

        for (var lineIndex in lines) {
            if (lines[lineIndex].length > 10) {
                event.preventDefault();
                return;
            }
        }

        if (lines.length > 2) {
            event.preventDefault();
            return;
        }
    });
});

使用jQuery限制textarea中每行的行数和字符数

2 个答案:

检查http://jsfiddle.net/7jVrT/