如何实现输入框数值更新时实时调整cube立方体大小，无需点击按钮触发

你只需要把原本绑定在按钮上的click事件，改为绑定到所有输入框的input事件上即可。input事件会在用户输入内容实时变更时触发，不需要等待点击按钮或者输入框失焦。

改造后的代码示例 #

// 获取所有数值输入框
const scaleInputs = document.getElementsByClassName('numeric-textbox');

// 给每个输入框绑定实时输入监听事件
Array.from(scaleInputs).forEach((input, index) => {
  input.addEventListener('input', () => {
    const val = parseFloat(input.value);
    // 输入值合法才更新对应轴的缩放
    if (!isNaN(val)) {
      switch(index) {
        case 0: cube.scale.x = val; break;
        case 1: cube.scale.z = val; break;
        case 2: cube.scale.y = val; break;
      }
    }
  })
})

可选优化方案 #

如果希望代码可维护性更强，可以给输入框增加标识缩放轴的自定义属性，比如：

<!-- 输入框示例 -->
<input class="numeric-textbox" data-axis="x" placeholder="X轴缩放">
<input class="numeric-textbox" data-axis="z" placeholder="Z轴缩放">
<input class="numeric-textbox" data-axis="y" placeholder="Y轴缩放">

对应的JS代码可以简化为：

Array.from(document.getElementsByClassName('numeric-textbox')).forEach(input => {
  input.addEventListener('input', () => {
    const val = parseFloat(input.value);
    const axis = input.dataset.axis;
    if (!isNaN(val) && axis && cube.scale.hasOwnProperty(axis)) {
      cube.scale[axis] = val;
    }
  })
})

如果你不需要修改输入框的HTML结构，直接使用第一个改造方案即可完全满足需求，不需要依赖原有按钮的点击逻辑，也可以和原按钮功能共存不冲突。

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