Best way to dynamically expand a text / form input?

Ask us anything How do I?
1

How can I expand the vertical size of a text input vertically as more text is added (without scroll) - just dynamically expand the input vertically?

In the form input - if you select long answer - there is a setting for ROWS:

rows
rows754×1773 129 KB

I wonder if WeWeb could make this bindable? And you set it based on a formula based on character length or scroll position???

Is there another way to do now without a custom component?

2 Likes
2

Thank you for your question. Let me check with the team and see how we can assist you. I will get back to you as soon as possible.

3

Same, been trying to work this out for ages.

4

ask ChatGPT to do the JS for you. I decided it this way.

5

Do you have this working with custom JS? If so, can you share the script?

6

In my case this code works

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`;
});

I just run it in WF when the page loads

7

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:

  1. you can see me highlight the <textarea> in the Inspector;
  2. I then edit the rows using the native component element—you’ll see in the Inspector the rows updating in real time
  3. 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.

Export-1714658089636

8

Yeah - I tried that too. They should just add “expand rows with content” option in the “Long answer” option of Input component.

Any thoughts @Alexis ??

9

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 :slight_smile:

@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

1 Like