document.getElementById('messageFormChat').addEventListener('submit', function(e) {
e.preventDefault(); // Предотвращаем стандартное поведение формы
const textarea = document.getElementById('messageInputChat');
const text = textarea.value.trim();
if (text) {
console.log("Сообщение отправлено: ", text); // Здесь ваш код для отправки сообщения
textarea.value = ''; // Очистка textarea после отправки
textarea.style.height = 'auto'; // Сброс высоты до начального значения для одной строки
}
});
document.getElementById('messageInputChat').addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); // Предотвращаем перевод строки при нажатии Enter без Shift
document.getElementById('messageFormChat').dispatchEvent(new Event('submit', {cancelable: true}));
}
});
document.getElementById('messageInputChat').addEventListener('input', function(e) {
const textarea = e.target;
textarea.style.height = 'auto'; // Сброс перед пересчетом, чтобы правильно измерить scrollHeight
let scrollHeight = textarea.scrollHeight;
let newHeight = scrollHeight > 300 ? 300 : scrollHeight; // Ограничение высоты до максимума для 15 строк
textarea.style.height = `${newHeight}px`;
});
Another option that crossed my mind was to control the rows using the HTML attributes, which is bindable, but we can rule that out. It appears the native component overrides the HTML attribute.
Edit:
I see that the GIF is not the best quality so you might not be able to follow what I am doing here:
you can see me highlight the <textarea> in the Inspector;
I then edit the rows using the native component element—you’ll see in the Inspector the rows updating in real time
I then go to the HTML attributes section in WeWeb and try to add “rows,” which you’ll see the Inspector accepting until I type the full “rows” with an “s” at which it disappears from the Inspector.
I think you can create a ticket on support.weweb.io asking for making rows bindable, it should be accepted as a bug and be pushed in production in the next two weeks easily
@Mark_Pederson I think the suggestion is interesting, I will create a product ticket and ask the team if we want to implement it inside our input or let people do it themself with the (future) bindable rows
Now that it’s bindable, how do you go about setting it dynamically so that it expands? Doing it by character length seems easy sometimes the length of that varies
For those looking into a solution for dynamically expanding ‘long answer’ (textarea) inputs in WeWeb, I found that applying the following custom CSS property worked for me:
field-sizing: content;
I’ve attached a screenshot showing where this can be added in the WeWeb editor. This allowed the textarea to auto-size with the content.
I also wanted my field to be the equivalent of say, 3 rows, even when empty. This CSS alone won’t do this, even when setting rows. To achieve this, I set min-height px to whatever 3 rows is in your UI - in my case I did a bit of trial and error, as soon as I noticed the min-height was making the field taller, I knew I had the right value.
Once you have the min-height, the rows value becomes redundant.