如何检测线条何时自动包裹在textarea中？ [英] How can I detect when a line is automatically wrapped in a textarea?

问题描述

在文本区域中输入文本并且它变得比区域宽时，文本将被包裹到下一行。有没有办法可以通过编程方式确定何时发生这种情况？

When typing text into a textarea and it becomes wider than the area, the text is wrapped onto the next line. Is there a way I can programmatically determine when this happens?

推荐答案

发生包装时没有触发实际事件，但你可以如果你知道textarea的宽度就解决一个解决方案。

There's no actual event fired when the wrapping occurs, but you can hack a solution if you know the width of the textarea.

在文本区域监听更改事件并将文本转换为包含其内容的div;

Listen for the change event on the text area and transfer the text into a div that wraps to it's content;

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

风格：

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

使用文本内容计算div的宽度并将其与常量进行比较textarea的宽度：

Calculate the width of the div with the text content and compare that to the constant width of the 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/

Here's a bit of a shoddy fiddle that should give you some idea how to continue: http://jsfiddle.net/cXbAh/1/

这篇关于如何检测线条何时自动包裹在textarea中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！