1

我喜欢构建没有“计算”大按钮的在线计算器。即，计算发生在更改事件上，无需用户单击计算按钮。不幸的是，许多用户只需输入数据并向下滚动即可查看结果，而无需选择或单击屏幕上的其他位置。此行为不会触发更改事件，因此结果不会更新。

以下是我认为用户输入已完成的一些场景：

  1. 用户输入数据和制表符（更改）
  2. 用户输入数据并将鼠标从文本框中移出（按键/输入后跟鼠标离开）
  3. 用户选项卡进入输入字段，输入数据并将鼠标移动到其他地方一定距离。即，鼠标在任何时候都不在输入字段上。

实施#1 & #2 应该很容易。我想看看如何最好地使用 jQuery 实现#3。是否有任何 jQuery 插件可以帮助我解决上述所有问题或仅提供 #3？

或者，我应该放弃这一切并放一个大的计算按钮吗？

4

1 回答 1

0

这是一个简单计算器的示例，它会根据每个输入更改进行更新。（没有添加检查该值是否为 int 等。）

$('#num1, #num2').bind('keyup', function() {
    if($('#num1').val() == '' || $('#num2').val() == '') {
        $('h1 b').html(0);
    } else {
         $('h1 b').html( parseInt($('#num1').val()) + parseInt($('#num2').val()) );
    }
}).trigger('keyup');

JsFiddle 示例

于 2013-03-14T09:59:57.520 回答