技术求助：如何获取输入框输入值的typeof类型？

input元素的value属性本身永远是字符串类型，所以直接用typeof检测它的结果必然是"string"。下面分两种场景给出解决方案：

1. 直接显示输入框值的typeof结果 #

如果只是需要显示输入框值本身的typeof类型，直接修改代码即可：

<p id="res">Value</p>
<input type="text" id="fname" name="fname"><br><br>

<script>
    document.getElementById('fname').addEventListener('input', function(){
        const inputValue = this.value;
        document.getElementById('res').textContent = `值: ${inputValue} | 类型: ${typeof inputValue}`;
    });
</script>

2. 检测输入内容对应的实际数据类型 #

如果想判断输入内容对应的实际逻辑类型（比如用户输入"123"时识别为数字，输入"true"识别为布尔值），可以写一个自定义判断函数：

<p id="res">Value</p>
<input type="text" id="fname" name="fname"><br><br>

<script>
    function getActualType(value) {
        // 处理空输入
        if (value === '') return '空值';
        // 判断布尔值（不区分大小写）
        if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') return 'boolean';
        // 判断数字（排除纯空格的情况）
        if (!isNaN(Number(value)) && value.trim() !== '') return 'number';
        // 判断null和undefined
        if (value.toLowerCase() === 'null') return 'null';
        if (value.toLowerCase() === 'undefined') return 'undefined';
        // 其余情况默认是字符串
        return 'string';
    }

    document.getElementById('fname').addEventListener('input', function(){
        const inputValue = this.value;
        const actualType = getActualType(inputValue);
        document.getElementById('res').textContent = `值: ${inputValue} | 实际类型: ${actualType}`;
    });
</script>

这个函数会根据输入内容的实际语义返回对应的类型，覆盖了常见的几种数据类型场景。

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