基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

这里给出基于HTML+CSS、jQuery编写的简易计算器添加键盘监听的完整攻略。

1. 准备

在已有基于HTML+CSS、jQuery编写的简易计算器的基础上，添加键盘监听的功能。

HTML+CSS相关代码略，这里主要说明JavaScript的代码。

2. 代码实现

2.1 监听键盘事件

$(document).keydown(function(event) {
  var keycode = event.which; // 获取键码
  var operators = ['+', '-', '*', '/'];
  var value = '';

  // 数字键码，包括小数点(46)、数字(48-57)、数字键盘区(96-105)
  if ((keycode >= 48 && keycode <= 57) || (keycode >= 96 && keycode <= 105) || keycode === 46) {
    value = String.fromCharCode(keycode);
    updateValue(value);
  }

  // 操作符键码，包括加(107)、减(109)、乘(106)、除(111)
  if (operators.indexOf(value) !== -1 || keycode === 107 || keycode === 109 || keycode === 106 || keycode === 111) {
    event.preventDefault(); // 取消默认行为
    value = getOperator(keycode);
    updateValue(value);
  }

  // 等号键码(13)
  if (keycode === 13) {
    event.preventDefault(); // 取消默认行为
    calculateResult();
  }

  return false;
});

2.2 更新输入框的值

function updateValue(value) {
  var oldValue = $('#result').val();
  var newValue = '';

  // 处理小数点的输入
  if (value === '.') {
    if (oldValue.indexOf('.') === -1) {
      newValue = oldValue + value;
    }
  } else {
    newValue = oldValue + value;
  }

  // 更新输入框的值
  $('#result').val(newValue);
}

2.3 获取操作符

function getOperator(keycode) {
  var operators = {
    107: '+', // 加
    109: '-', // 减
    106: '*', // 乘
    111: '/', // 除
  };

  return operators[keycode] || '';
}

3. 示例说明

3.1 示例1

按下数字键1，输入框显示“1”，再按下加号键，输入框显示“1+”，再按下数字键2，输入框显示“1+2”，最后按下等号键，输出框显示“3”。

3.2 示例2

按下数字键9，输入框显示“9”，再按下减号键，输入框显示“9-”，再按下数字键5和小数点键，输入框显示“9-5.”，再按下数字键2，输入框显示“9-5.2”，最后再按下等号键，输出框显示“3.8”。