javascript - 使用tailwind css和alpine js 3.x动态调整textarea的大小

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 上。文本区域不会针对占位符进行缩放。

关于问题可能是什么的任何想法？

标签： javascripthtmltailwind-cssalpine.js

Answer 1

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

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