Javascript:检测文本区域已满

Question

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

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

所以最终发生的情况是，在 .length 属性达到文本区域限制之前，文本区域总是耗尽空间。还有其他方法可以检测文本区域的填充度吗？ Jquery 解决方案也很好。谢谢。

Answer 1

您可以尝试检查文本区域中是否出现了滚动条。 Here是一个简单的方法来做到这一点。最初使滚动条比您想要显示的最终高度短一行，然后在按键时检查滚动条是否已出现，然后等待输入下一个空格字符。输入空格字符后，立即执行以下操作: 1.删​​除空格字符， 2.增加文本区域高度一行徘徊(因此滚动条消失)， 3. 创建一个新的文本区域并将焦点移至新的文本区域。

更新
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;}