当输入长字符串时，如何将文本保持在输入中答案

【问题标题】：How I can keep the text like justify inside of the input when long string is typing down当输入长字符串时，如何将文本保持在输入中
【发布时间】：2019-01-25 16:03:08
【问题描述】：

我有一个使用 jquery 的聊天应用程序，当有人键入长字符串时，我想像所有聊天一样在输入中证明它是正确的，有人可以帮助我提前谢谢

【问题讨论】：

你的意思是像换行？
请分享您的代码，展示您的尝试
是换行
你需要一个文本区域而不是多行输入
Is there anyway to have a textarea "autofit" height based on the content at page load?的可能重复

标签： javascript jquery string input

【解决方案1】：

确保您在消息条目中使用具有指定宽度/列的textarea。输入不适合您的要求。

【讨论】：

【解决方案2】：

您应该使用文本区域。如果希望行动态调整，可以使用 jQuery autosize 插件。

下面的演示使用Typed 自动输入文本区域并使用Lorem.js 生成文本。我添加了一个监视功能 (updateFn) 来检查是否需要扩展文本区域，因为自动输入与物理用户输入的作用不同。 ;)

var updateRate = 100;
var updateId = null;

(function($) {
  $.fn.numOfLines = function() {
    var lineHeight = parseInt(this.css('lineHeight'), 10);
    return Math.floor(this.attr('scrollHeight') / lineHeight);
  }
})(jQuery);


$(function() {
  $('.auto-size').autosize();
  var typed = new Typed('.auto-size', {
    strings: [ new Lorem().createText(2, Lorem.TYPE.PARAGRAPH) ],
    typeSpeed: 1000 / updateRate,
    preStringTyped: startUpdate,
    onComplete: cancelUpdate
  });
});

function updateFn(opts) {
  var lines = $('.auto-size').numOfLines();
  if (lines != opts.prevLines) {
    opts.prevLines = lines;
    $('.auto-size').trigger('autosize.resize');
  }
}

function startUpdate(arrayPos, self) {
  updateId = setInterval(updateFn, updateRate, { prevLines: 1 });
}

function cancelUpdate(self) {
  clearInterval(updateId);
}

textarea[class="auto-size"] {
  resize: none;
  word-break: break-word;
  text-wrap: unrestricted;
}
.input-container label {
  font-weight: bold;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-autosize@1.18.18/jquery.autosize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.9/typed.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/f/loremjs@ec971d2c7fc9a9b6a788095e0523a2794420f5c4/lorem.js"></script>
<div class="input-container">
  <label>Message: </label>
  <textarea cols="72" rows="1" class="auto-size"></textarea>
</div>

【讨论】：