layui怎么動(dòng)態(tài)添加輸入框

小億
522
2024-01-13 18:40:12
欄目: 編程語言

在Layui中，可以使用下面的代碼動(dòng)態(tài)添加輸入框：

<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="請(qǐng)輸入內(nèi)容" autocomplete="off" class="layui-input"></div>';
    $("#container").append(inputHtml);
    
    // 重新渲染表單元素
    form.render();
  });
});
</script>

上述代碼首先在div容器中放置一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕時(shí)，會(huì)動(dòng)態(tài)地添加一個(gè)輸入框到容器中。

在JavaScript代碼中，首先通過layui.use方法加載element和form模塊，然后在點(diǎn)擊事件處理函數(shù)中，使用jQuery的append方法將一個(gè)輸入框的HTML代碼添加到容器中。

最后，調(diào)用form.render()方法重新渲染表單元素，以使新添加的輸入框能夠正確顯示樣式。

0 踩