如何判断输入框输入值的typeof类型？当前非空输入均返回string

HTML输入框的value属性始终返回字符串类型，所以直接用typeof检测必然得到string——这是浏览器的默认行为，不管你输入的是数字、布尔值还是其他内容。要得到输入内容对应的实际类型，你需要手动把字符串转换为对应的原始类型。

这里给你一个实用的实现方案，能自动识别数字、布尔值和普通字符串：

function getInputTypeAndValue(inputStr) {
  // 处理空输入
  if (inputStr.trim() === '') {
    return { type: 'string', value: inputStr };
  }
  // 转换并验证纯数字输入
  const numValue = Number(inputStr);
  if (!isNaN(numValue) && inputStr.trim() === numValue.toString()) {
    return { type: typeof numValue, value: numValue };
  }
  // 识别布尔值（忽略大小写）
  const normalizedStr = inputStr.trim().toLowerCase();
  if (normalizedStr === 'true') {
    return { type: 'boolean', value: true };
  }
  if (normalizedStr === 'false') {
    return { type: 'boolean', value: false };
  }
  // 其他情况保持字符串类型
  return { type: 'string', value: inputStr };
}

function submit_8(){
    const text = document.querySelector('.text_mes').value;
    const result = getInputTypeAndValue(text);
    console.log(`类型：${result.type}，对应值：${result.value}`);
}

代码逻辑说明： #

• 空输入处理：如果输入框是空的（或只有空格），仍返回string类型
• 数字验证：用Number()转换输入字符串后，会检查转换结果是否为有效数字，同时确保原输入和数字转回的字符串完全一致——避免把"8abc"这类包含非数字的内容误判为数字
• 布尔值识别：把输入转为小写后判断是否是"true"或"false"，兼容大小写输入（比如输入"True"也能识别为布尔值）
• 其他场景：输入"hello"、"12a3"这类内容时，保持string类型

测试效果：

• 输入8 → 返回类型number，值8
• 输入true或True → 返回类型boolean，值true
• 输入false或FALSE → 返回类型boolean，值false
• 输入hello → 返回类型string，值hello

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