Layui实现textarea高度随内容自动变化的方法大揭秘

在layui中，你可以使用JavaScript或者jQuery来实现textarea的高度跟随内容高度自动变化。以下是一个简单的示例： 1. 首先，确保你已经引入了layui的CSS和JS文件。 ```html <link rel="stylesheet" href="https://unpkg.com/layui@2.6.4/layui.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.4/layui.js"></script> ``` 2. 然后，你可以使用layui的`layedit`组件，它内置了高度自适应功能。如果你只需要一个普通的textarea，可以使用普通的`<textarea>`标签，然后添加一个`resize`事件监听器来动态调整高度。 ```html <textarea id="myTextarea" placeholder="请输入内容..."></textarea> <script> document.getElementById('myTextarea').addEventListener('input', function() { this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'; // 设置高度为内容高度 }); </script> ``` 3. 如果你想要使用layui的`layedit`组件，你可以这样做： ```html <div id="layedit" lay-type="text"></div> <script> layui.use(['layedit'], function(){ var layedit = layui.layedit; layedit.render({ elem: '#layedit', // 绑定元素 content: '', // 初始化内容 toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontface', 'fontsize', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'blockquote', 'emotion', 'link', 'unlink', 'image'] // 工具栏配置 }); layedit.on('input', function() { // 监听输入事件 this.resize(); // 调整高度 }); }); </script> ``` 这样，每当textarea的内容发生变化时，其高度就会自动调整到内容的高度。 ######[AI写代码神器 | 419点数解答 | 2024-03-23 19:43:37]