Question

我正在尝试在我的网站上进行对话窗口，它是如何在Facebook上进行的。我已经完成了布局，但我遇到了textarea字段的问题。在Facebook上，用户按下SHIFT + ENTER创建新行，行数增加一行到五行。在五行/行显示滚动条之后。当用户写入消息并且文本跳转到新行时，同样的事情发生，然后行数增加一行。非常感兴趣我的效果会增加一行。我注意到，效果发生在：

1）用户按SHIFT + ENTER，

2）用户写一条消息并发生一个单词，

3）用户持有一个字符并出现一个中断新行

我怎样才能获得这种效果？

我需要这样的东西：

我在stackoverflow上找到的代码片段下面：

$('textarea','.dialogbox').keypress(function() {
    if($(this).val().length % 10 == 0) {
        $(this).val($(this).val() + '\n');
    }
});

这是我的代码：

$('textarea','.dialog').keyup(function(event) {

    var arrayOfLines = $(this).val().split('\n');
    $.each(arrayOfLines, function(index, item) {
    index++;
    if(index < 6){
    $('textarea','.dialogbox').attr('rows',index).css('overflow','hidden');
    }else{
    $('textarea','.dialogbox').css('overflow-y','scroll');
    }
});

我的解决方案看起来像这样，但我需要100％的宽度，以便如果用户写入消息并且他的最后一个字符在textarea中，jquery必须在textarea中插入'\ n'，以便keyup函数可以将行增加1

$('textarea','.dialogbox').keypress(function() {
    if($(this).val().length % 10 == 0) {
        $(this).val($(this).val() + '\n');
    }
}).keyup(function(event) {

    var arrayOfLines = $(this).val().split('\n');
    $.each(arrayOfLines, function(index, item) {
    index++;
    if(index < 6){
    $('textarea','.dialogbox').attr('rows',index).css('overflow','hidden');
    }else{
    $('textarea','.dialogbox').css('overflow-y','scroll');
    }
});

我认为我需要一个模数。 Keress功能检查文本字段。当在textarea字段中出现行的最大长度时，必须插入'\ n'。

Answer 1

如果我理解正确的话，那么，就在这里。下次，在寻求答案之前先试试自己。

CSS

textarea {
    overflow: scroll; // for scrollbar
}

div {
    margin: 10px 0;
}

div:nth-child(odd) {
    background: rgba(128,128,128, 0.1);
}

div:nth-child(even) {
    background: rgba(0,128,0, 0.1);
}

HTML

<textarea rows="5" cols="30"></textarea>

的jQuery

$('textarea').keydown(function(event) {
    var cont = $(this).val();
    if (event.shiftKey && event.keyCode == 13) {  // if shift+enter

        var div = $("<div></div>").text(cont);
        $(this).before(div);
        $(this).val("");

    }
});

修改

if(index < 6){
   $('textarea','.dialogbox').attr('rows',index).css('overflow','hidden'); //don't see any use
} else {
    $('textarea','.dialogbox').attr('rows',index); // modified here
}

同样，你的问题真的令人困惑。请更清楚。

如何在facebbok对话框中动态更改textarea中的行数？

1 个答案:

修改