js—input框中輸入數字，動態生成內容的方法

項目中需要在前端實現：

1. 用戶輸入數字n，動態生成n個元素，刪除n，自動清空n個元素（如圖一）；
2. 用戶輸入數字n，失焦生成n個元素，再聚焦修改n，自動清空n個元素（如圖二）；

圖一：

圖二：

 

需求一實現方式：

<input type="number" placeholder="請輸入圖片數量" id="img_num" name="img_num" />張

<li id="img_upload"></li>

<script>
    $('#img_num').bind('input propertychange',function() {    
        $("#img_upload").empty();    
        var text = $('input[name="img_num"]').val();
        //console.log(text);    
            for (let i =1;i<=text;++i){            
                $("<li id='preview_"+i+"'><b>*</b> <span>圖片"
                +i+
                ":  </span><span ><input name='img[]' type='file' id='imgFile_"+i+
                "' accept='image/*' /></span> </li>").appendTo($('#img_upload'));
            }        
    });
</script>

需求二實現方式：

<input type="number" placeholder="請輸入圖片數量" id="img_num" name="img_num" />張
<li id="img_upload"></li>
<script>

// 聚焦清空
    $('#img_num').focus(function(){
        $('#img_upload').empty();
    })

// 失焦寫入；動態生成input上傳框

    $('#img_num').blur(function() {    
        $("#img_upload").empty();    
        var text = $('input[name="img_num"]').val();
        console.log(text);    
            for (let i =1;i<=text;++i){            
                $("<li id='preview_"+i+"'><b>*</b> <span>圖片"
                +i+
                ":  </span><span ><input name='img[]' type='file' id='imgFile_"+i+
                "' accept='image/*' /></span> </li>").appendTo($('#img_upload'));
            }        
    });
</script>

針對關鍵點總結：

事件方法名	用法	釋義
bind	el.bind(“oninput，propertychange”,function(){})①	綁定元素，監聽元素
focus	el.blur(function(){})	input框聚焦時執行
blur	el.blur(function(){})	input框失焦時執行

備注：

①：bind中 oninput 和 propertychange，都是事件對象，是在值改變時立即觸發；只是后者是用以替代oninput在IE9以下的不兼容性；另：onchange是在值改變后失去焦點才觸發，並且可以用在非輸入框中，如：select等

相關鏈接：https://www.cnblogs.com/LHYwin/p/6136256.html.bind('input propertychange'

 

 

propertychange