javascript - 如何检测一行何时自动包含在 textarea 中？

Question

当在 textarea 中键入文本并且它变得比该区域更宽时，文本将换行到下一行。有没有办法以编程方式确定何时发生这种情况？

Answer 1

发生换行时不会触发实际事件，但如果您知道 textarea 的宽度，则可以破解解决方案。

侦听文本区域上的更改事件并将文本传输到包含其内容的 div 中；

<div class="textwidth"></div>

搭配风格：

.textwidth {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
}

用文本内容计算 div 的宽度，并将其与 textarea 的恒定宽度进行比较：

$('textarea').on('keyup', function() {
  var lastLine = $(this).val().split('/n').pop();
  var width = $('.textwidth').text(lastLine).width(); 
  if ( width >  $('textarea').width() ) {
    // fire wrap event
  }
});

这是一个伪劣的小提琴，应该让你知道如何继续：http: //jsfiddle.net/cXbAh/1/

Answer 2

您可以使用“隐藏”跨度测量每个线宽。
如果行宽大于 textarea 宽度，则换行

演示在这里

function textWidth(txt, font, padding) {
    $span = $('<span></span>');
    $span.css({
        font:font,
        position:'absolute',
        top: -1000,
        left:-1000,
        padding:padding
    }).text(txt);
    $span.appendTo('body');
    return $span.width();
}