在Layui中,可以使用下面的代碼動態添加輸入框:
<div id="container">
<button class="layui-btn layui-btn-primary" id="addInput">添加輸入框</button>
</div>
<script>
layui.use(['element', 'form'], function(){
var element = layui.element;
var form = layui.form;
// 添加輸入框
$("#addInput").on("click", function() {
var inputHtml = '<div class="layui-form-item"><input type="text" name="input[]" placeholder="請輸入內容" autocomplete="off" class="layui-input"></div>';
$("#container").append(inputHtml);
// 重新渲染表單元素
form.render();
});
});
</script>
上述代碼首先在div
容器中放置一個按鈕,當點擊按鈕時,會動態地添加一個輸入框到容器中。
在JavaScript代碼中,首先通過layui.use
方法加載element
和form
模塊,然后在點擊事件處理函數中,使用jQuery的append
方法將一個輸入框的HTML代碼添加到容器中。
最后,調用form.render()
方法重新渲染表單元素,以使新添加的輸入框能夠正確顯示樣式。