使用 tailwind css 和 alpine js 3.x 动态调整文本区域的大小

Question

不确定这里有什么问题，但这在 Alpine 中完美运行 2.x

这是为了使文本区域调整大小有点不和谐。当您键入时，文本区域会变大。

键入或按住 shift + enter 的操作仍然会调整框的大小。但是第一个观点被打破了。您需要点击输入区域并输入一个字母才能开始工作。

<textarea 
        x-data="{ resize: () => { $el.style.height = '5px'; $el.style.height = $el.scrollHeight + 'px' } }"
        x-init="resize()"
        @input="resize()"
        wire:model.defer="add_comment"
        x-on:keydown.enter="if (!$event.shiftKey) $wire.addComment()"
        placeholder="Send Message..." 
        class="text-base bg-blueGray-100 border-none w-full max-h-58  rounded-md  focus:outline-none focus:ring-0 resize-none"
></textarea>

在 Alpine 上 2.x 文本区域正确缩放以显示占位符

高山 3x。文本区域不会针对占位符进行缩放。

对可能出现的问题有什么想法吗？

Answer 1

我删除了 x-init 并解决了问题。

老实说，我不确定为什么它不起作用，但问题已经解决。

使用 tailwind css 和 alpine js 3.x 动态调整文本区域的大小

resize textarea dynamically with tailwind css and alpine js 3.x

html

javascript

tailwind-css

alpine.js