求助：利用onchange事件实现文本框按输入内容切换背景色功能

没问题，这题其实就是通过onchange事件监听输入框的内容变化，结合简单的类型判断来切换背景色，我给你写个完整可运行的示例，每一步都讲清楚：

核心逻辑拆解 #

• 当输入框失去焦点时（onchange的触发时机），先获取输入内容并去除首尾空格
• 分三种情况做判断处理：
  1. 内容为空 → 背景设为红色
  2. 内容是纯数字 → 背景设为黄色
  3. 其他情况（字符串或混合内容）→ 背景设为绿色

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Input Background Color Switch</title>
</head>
<body>
    <input type="text" id="colorInput" onchange="handleInputChange()" placeholder="输入内容试试">

    <script>
        function handleInputChange() {
            const inputElement = document.getElementById('colorInput');
            const inputValue = inputElement.value.trim();

            if (inputValue === '') {
                // 留空状态
                inputElement.style.backgroundColor = 'red';
            } else if (/^\d+$/.test(inputValue)) {
                // 匹配纯整数数字
                inputElement.style.backgroundColor = 'yellow';
            } else {
                // 字符串或非纯数字内容
                inputElement.style.backgroundColor = 'green';
            }
        }
    </script>
</body>
</html>

细节补充说明 #

• 用trim()是为了过滤用户只输入空格的情况，避免误判为字符串
• 正则/^\d+$/只匹配纯整数，如果需要支持小数（比如12.34），可以把正则改成/^\d+(\.\d+)?$/
• 如果想要实时触发颜色变化（不用等输入框失去焦点），可以把onchange换成oninput，交互体验会更流畅

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