Javascript：检测文本区域已满

Question

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

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

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

Answer 1

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

更新
这是一个演示。我稍微改变了我的方法，这是代码：

Markup

<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>，然后获取mypre的宽度甚至高度$("#mypre").width()。您可以决定如何使用“模拟”宽度/高度。