JavaScript中Number Input事件选型：根据输入值显示对应数量列表元素

列表元素默认处于隐藏状态，希望通过id为postnr的数字输入框选择数字后，显示对应数量的列表元素。不确定该用哪种DOM事件，也需要遍历列表实现对应逻辑的技术建议。

提供的初始代码：

<input type="number" id="postnr" name="postnr" min="0" max="5">

<ul id="blogposts">
  <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae fugit ut quod reiciendis asperiores animi vitae incidunt aspernatur ullam autem.</li>
  <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae fugit ut quod reiciendis asperiores animi vitae incidunt aspernatur ullam autem.</li>
  <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae fugit ut quod reiciendis asperiores animi vitae incidunt aspernatur ullam autem.</li>
</ul>

ul {
  font-size : 20px;
  padding   : 10%;
  display   : none;
}

let blogNr = document.getElementById("postnr");
var scene  = document.getElementById("blogposts");

blogNr.oncontextmenu {
  console.log("you changed the form");
}

解决方案 #

1. 选对DOM事件 #

直接用input事件就好，它能实时响应输入框的所有变化——键盘输入、点击上下箭头调数值、粘贴内容都会触发，比change事件（必须失去焦点才触发）更贴合实时显示的需求。

2. 调整CSS样式 #

原来的CSS把整个ul都隐藏了，应该改成默认隐藏列表项li，ul保持显示（不然li显示了也看不到）：

ul {
  font-size: 20px;
  padding: 10%;
}
#blogposts li {
  display: none;
}

3. 实现核心逻辑 #

获取所有列表项，根据输入框的数值控制每个li的显示/隐藏，同时处理数值边界（比如输入超过列表总数的数字时，只显示所有li；输入0则全隐藏）：

const input = document.getElementById('postnr');
const listItems = document.querySelectorAll('#blogposts li');

input.addEventListener('input', function() {
  const showCount = parseInt(this.value) || 0;
  // 处理数值边界，不能小于0，也不能超过列表项总数
  const validCount = Math.max(0, Math.min(showCount, listItems.length));
  
  listItems.forEach((item, index) => {
    item.style.display = index < validCount ? 'block' : 'none';
  });
});

效果说明 #

• 输入0：所有li隐藏
• 输入1：显示第一个li
• 输入3：显示全部3个li
• 输入超过3的数字（比如5）：还是显示全部3个li，不会报错

内容的提问来源于stack exchange，提问作者gogosimba