输入特定数字时修改元素样式的实现及JS报错修复问询

问题描述 #

我希望实现当<input>中输入特定数字（如"5214"）而非任意文本时，修改<body>这类元素的样式。但当前代码触发报错：Uncaught TypeError: Cannot set properties of undefined (setting 'innerText')，错误位于第3行。我曾在ADT安防系统面板上见过类似功能，当时使用的是<input type="hidden">和4个<span>元素。

原代码如下：

原JS代码 #

const inputField = document.getElementsByClassName("doSomething");

if(inputField[0].innerText = "5214") {
  document.getElementsByTagName("body").style.backgroundColor = "lime";
}

原CSS代码 #

input {
  background-color: #ffffff;
}

原HTML代码 #

<label>Numbers only:</label><input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
<br>
<label>Numbers and decimal points only:</label>
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />

错误原因及修复步骤 #

• 元素选择器不匹配：JS中用getElementsByClassName("doSomething")获取元素，但HTML里的<input>没有添加doSomething类，导致inputField[0]为undefined，访问其属性就会报错。需给目标<input>添加对应的类名。
• input内容获取错误：<input>是表单元素，用户输入的内容存储在value属性中，而非innerText，需改用value获取输入值。
• 条件判断运算符错误：原代码中用了赋值运算符=，这会把"5214"赋值给元素属性，而非判断相等。需改用严格相等运算符===进行条件判断。
• body元素获取错误：getElementsByTagName("body")返回的是HTMLCollection集合，需通过[0]取出唯一的<body>元素才能访问其style属性。
• 缺少输入监听：原代码是页面加载时一次性执行，无法实时检测用户输入。需给<input>添加input或keyup事件监听，实时触发判断逻辑。

修复后的完整代码 #

HTML #

<label>Numbers only:</label><input type="text" class="doSomething" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
<br>
<label>Numbers and decimal points only:</label>
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />

CSS #

input {
  background-color: #ffffff;
}

JS #

const inputField = document.querySelector(".doSomething");

// 监听输入事件，实时检测内容
inputField.addEventListener("input", function() {
  if (this.value === "5214") {
    document.querySelector("body").style.backgroundColor = "lime";
  } else {
    // 输入不符合时恢复原样式
    document.querySelector("body").style.backgroundColor = "";
  }
});

补充：类似ADT面板的4位数字输入实现 #

如果想模拟ADT安防面板那种4个独立输入位的样式，可以用隐藏input加span的方式，代码示例如下：

HTML #

<div class="code-input">
  <span class="input-digit" data-index="0"></span>
  <span class="input-digit" data-index="1"></span>
  <span class="input-digit" data-index="2"></span>
  <span class="input-digit" data-index="3"></span>
  <input type="hidden" id="hidden-code" />
</div>

CSS #

.code-input {
  display: flex;
  gap: 8px;
}

.input-digit {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.input-digit:focus {
  outline: 2px solid #2196F3;
}

JS #

const digitSpans = document.querySelectorAll(".input-digit");
const hiddenInput = document.getElementById("hidden-code");
let currentIndex = 0;

// 给每个span绑定点击事件，切换焦点
digitSpans.forEach((span, index) => {
  span.addEventListener("click", () => {
    currentIndex = index;
    span.setAttribute("tabindex", "0");
    span.focus();
  });
  
  // 监听键盘输入
  span.addEventListener("keydown", (e) => {
    // 只允许数字输入
    if (e.key >= "0" && e.key <= "9") {
      e.preventDefault();
      span.textContent = e.key;
      // 更新隐藏input的值
      const code = Array.from(digitSpans).map(s => s.textContent).join("");
      hiddenInput.value = code;
      
      // 检测是否匹配目标码
      if (code === "5214") {
        document.body.style.backgroundColor = "lime";
      } else {
        document.body.style.backgroundColor = "";
      }
      
      // 自动切换到下一个输入位
      if (currentIndex < 3) {
        currentIndex++;
        digitSpans[currentIndex].setAttribute("tabindex", "0");
        digitSpans[currentIndex].focus();
      }
    }
    // 退格键删除当前数字并返回上一位
    else if (e.key === "Backspace") {
      e.preventDefault();
      span.textContent = "";
      const code = Array.from(digitSpans).map(s => s.textContent).join("");
      hiddenInput.value = code;
      
      if (currentIndex > 0) {
        currentIndex--;
        digitSpans[currentIndex].focus();
      }
    }
  });
});

// 默认聚焦第一个输入位
digitSpans[0].setAttribute("tabindex", "0");
digitSpans[0].focus();

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