Question

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

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

用户输入数据和标签（更改）
用户输入数据并将鼠标从文本框中移出（按键/输入然后鼠标左键）
用户标签进入输入栏，输入数据并将鼠标移动到其他位置一定距离。即，鼠标在任何时候都不在输入字段上。

实施＃1＆amp; ＃2应该很容易。我试图看看如何最好地使用jQuery实现＃3。是否有任何jQuery插件可以帮助我完成上述所有或仅＃3？

或者，我应该放弃所有这些并放一个大计算按钮吗？

Answer 1

这是一个简单的计算器示例，可以更新每个输入更改。（没有添加值为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 example

检测表单输入的更改完成

1 个答案: