键入长字符串时，如何在输入中保留诸如“两端对齐”之类的文本

Question

我有一个使用jquery的聊天应用程序，我想当某人键入一个长字符串时像所有聊天一样在输入中将其对齐，有人可以事先帮助我吗？

Answer 1

确保您使用的textarea带有指定宽度/列的消息条目。输入的内容不符合您的要求。

Answer 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>