Как я могу сохранить текст как выравнивание внутри ввода, когда длинная строка печатает

Question

У меня есть приложение чата, использующее jquery. Я хочу, чтобы, когда кто-то печатал длинную строку, оправдывал ее во входных данных, как это делают все чаты, может ли кто-нибудь помочь мне заранее спасибо

Answer 1

Вы должны использовать текстовую область.Если вы хотите, чтобы строки динамически корректировались, вы можете использовать плагин 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>

Answer 2

Убедитесь, что вы используете textarea с указанной шириной / столбцами для ввода сообщения. Входы не подходят для того, что вы просите.