在前端开发中，常需根据用户输入的数值动态渲染对应数量的表单控件。以下是两种典型场景的实现方案：

场景一：实时输入即时生成 当用户在输入框中输入数字时，立即生成相应数量的文件上传项，并支持清空后自动移除所有内容。

<input type="number" placeholder="请输入图片数量" id="img_num" name="img_num" />


<script>
document.getElementById('img_num').addEventListener('input', function () {
    const container = document.getElementById('img_upload');
    const count = parseInt(this.value) || 0;

    // 清空原有内容
    container.innerHTML = '';

    // 动态创建指定数量的上传项
    for (let i = 1; i <= count; i++) {
        const item = document.createElement('li');
        item.id = `preview_${i}`;
        item.innerHTML = `
            <b>*</b>
            <span>图片${i}:</span>
            <span>
                <input type="file" name="img[]" accept="image/*" id="imgFile_${i}" />
            </span>
        `;
        container.appendChild(item);
    }
});
</script>

场景二：聚焦清空，失焦生成 用户聚焦输入框时清除已有内容，失焦后根据当前值重新生成对应数量的上传组件。

<input type="number" placeholder="请输入图片数量" id="img_num" name="img_num" />


<script>
const inputField = document.getElementById('img_num');
const container = document.getElementById('img_upload');

// 聚焦时清空内容
inputField.addEventListener('focus', function () {
    container.innerHTML = '';
});

// 失焦时根据输入值生成新内容
inputField.addEventListener('blur', function () {
    const num = parseInt(this.value) || 0;
    container.innerHTML = '';

    for (let i = 1; i <= num; i++) {
        const li = document.createElement('li');
        li.id = `preview_${i}`;
        li.innerHTML = `
            <b>*</b>
            <span>图片${i}:</span>
            <span>
                <input type="file" name="img[]" accept="image/*" id="imgFile_${i}" />
            </span>
        `;
        container.appendChild(li);
    }
});
</script>

核心事件对比说明

事件类型	触发时机	兼容性	适用场景
input	输入值变化时立即触发	所有现代浏览器	实时响应用户输入
propertychange	IE专属，值变化即触发	仅限IE9及以下	旧版IE兼容处理
blur	失去焦点时触发	所有浏览器	延迟执行生成逻辑
focus	获得焦点时触发	所有浏览器	清理或重置状态

注：input 和 propertychange 均用于监听值的实时变化，其中 propertychange 是为兼容旧版IE而保留的替代方案。onchange 则需在失去焦点后才触发，适用于 <select> 等非文本输入控件。