Question

我正在尝试检测textarea何时变满以创建分页效果。但是，使用.length属性将不起作用，因为长字会“跳转”到新行。

| I like to dooo|     displays as  | I like to     | 
| oooodle       |                  | dooooooodle   |

所以最终发生的事情是，在.length属性达到textarea限制之前，textarea总是耗尽空间。有没有其他方法来检测textarea丰满度？ Jquery解决方案也很好。感谢。

Answer 1

您可以尝试检查textarea中是否出现了滚动条。 Here是一种简单的方法。最初使滚动条比您想要显示的最终高度短一行，然后在按键检查滚动条是否出现，然后等待输入下一个空格。输入空格char后，请执行以下操作： 1.删除空格字符， 2.增加textarea高度一行逗留（滚动条消失）， 3.创建一个新的textarea并将焦点移到新的textarea。

<强>更新
Here is a demo。我改变了我的方法，这是代码：

标记

<textarea class="paginate"></textarea>

JS

$('textarea.paginate').live('keydown', function() {

    // scrollbars apreared
    if (this.clientHeight < this.scrollHeight) {

        var words = $(this).val().split(' ');
        var last_word = words.pop();
        var reduced = words.join(' ');
        $(this).val(reduced);
        $(this).css('height', '65px');

        $(this).after('<textarea class="paginate"></textarea>');
        $(this).next().focus().val(last_word);

    }

});

CSS

.paginate { height: 60px; width: 200px; display: block;}

Answer 2

在运行时，您可以收听textarea的按键事件，将textarea.val（）值传递给隐藏的<pre id="mypre" style="display:none; "></pre>，然后获取mypre的宽度甚至高度$("#mypre").width()。您决定如何使用“模拟”宽度/高度。

Javascript：检测textarea是否已满

2 个答案: