Создание текстового ввода, такого как веб-телеграмма

Question

В моем веб-приложении есть функция чата.На данный момент ввод текста является стандартным textarea.Я хочу что-то похожее на Telegram.Они начинаются с одного элемента ввода строки.Если пользователь затем вводит и нажимает, ввод увеличивается по высоте до определенной точки.

Возможно ли это с html и css?

<form asp-controller="Conversation" asp-action="SendMessage">
    <input hidden id="ConversationId" name="ConversationId" value="@Model.Id" />
    <div class="input-group">
        <textarea id="Body" name="Body" rows="1" class="form-control" 
         autocomplete="off"></textarea>
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit">
              <i class="fa fa-envelope"></i>
            </button>
        </div>
    </div>
</form>

Редактировать: я знаю, что это работает с div и contentEditable, но проблема в том, что содержимое не будет отправлено, поскольку div не является элементом формы.

Answer 1

Создайте div и стилизуйте его с помощью -webkit-Appearance и -moz-Appearance и установите атрибут contenteditable

• Также создайте скрытый элемент ввода
• С помощью javascript добавьте текст элемента div в скрытый элемент
• Затем вы можете использовать его в форме для отправки

Скрытый вводбудет сериализован как данные формы, однако свойство css не поддерживается в IE 6-10 и 11.

Запустите фрагмент и протестируйте его:

const input = document.getElementById("input"),
			button = document.getElementById("send-button"),
			message = document.getElementById("message");
			
			
			
input.addEventListener('keyup', function (e) {
	const target = e.target;
	
	var value = target.textContent || target.innerText;
				
	//Escape any space before and after input
	value = value.replace(/(\s+)/g, '');
				
	//Set the value to message input
	message.value = value;			
})	



//Send the message input
button.addEventListener('click', function (e) {
	e.preventDefault();
	//assume your sending the input to server
	// if the value is not empty
	if(message.value !== '') {
		alert(message.value)
	}
	
});

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
		display: inline-block;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid #ccc;
    /* font: -moz-field;
    font: -webkit-small-control; */
		font-size: .9rem;
    margin-top: 5px;
    padding: .8rem .5rem;
    width: 200px;  
		
}

<div id="input" contenteditable data-placeholder="Enter your text"></div>
<input type="hidden" id="message"/>

<button type="submit" id="send-button">
Send
</button>

Живой пример в JSfiddle