Search code examples
javascriptpythonhtmlflaskhtmx

Is it possible to expand an input box purely with HTMX?

I want to build an input box where if the text reached to the bottom of the input box, it automatically increases the input box's height to fit the text. Is that possible by using purely HTMX?

or is it only possible with javascript? because i dont know

Solution

  • So as per my knowledge this type functionality generally required JavaScript to constantly monitor the textarea size and change the size accordingly. you can add javascript on the textarea like this:

    <body>
<textarea id="input-box" rows="1" oninput="autoResize(this)"></textarea>
<script>
function autoResize(textarea) {
textarea.style.height = "auto";
textarea.style.height = (textarea.scrollHeight) + "px";
}
</script>
</body>

    hope this will help you.