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 回答