javascript - jQuery 计算 Text_Change 的值

标签 javascript jquery

我有 3 个文本框。

  • 价格
  • 百分比
  • 结果

当价格文本框或百分比的值更改时,我想在结果文本框中显示结果。
公式很简单,但我不知道它不起作用!

Result = Percent/100 * price


百分比只能介于 0 到 9 之间。 我写了这段代码。问题出在哪里?

  var textbox = $("#<%= txtTaxPercent.ClientID %>");
            var ResultTextbox = $("#<%= txtfctTaxValue.ClientID %>");
            var PriceTextbox = $("#<%= txtPurePrice.ClientID %>");
            $(textbox).keydown(function (e) {
                var Result1;
                Result1 = (parseFloat(textbox.val()) / 100) * parseInt(PriceTextbox.val());
                ResultTextbox.val('');
                ResultTextbox.val(Result1);
            });
            $(PriceTextbox).keydown(function (e) {
                var Result2;
                Result2 = (parseFloat(textbox.val()) / 100) * parseInt(PriceTextbox.val());
                ResultTextbox.val('');
                ResultTextbox.val(Result2);
            });

最佳答案

我的第一个想法是你想要 change而不是keydown编辑:实际上,您可能想要 change , keypress , keydown ,和keyup只是为了掩盖你的基地,因为 change在您离开 field 之前不会开火;取决于你想要多快。您还可以抛出 paste在那里,因为某些浏览器可能支持这一点。甚至可能blur确保无论他们如何更改值,如果他们离开您重新计算的字段。

此外,没有理由调用 val()用一个空字符串,只是为了转身并用你的结果调用它。第二次调用始终会覆盖第一次调用写入的值。而且无需调用$()第二次在 jQuery 对象上。所以:

您还可以稍微压缩一下代码。所以:

var textbox = $("#<%= txtTaxPercent.ClientID %>");
var ResultTextbox = $("#<%= txtfctTaxValue.ClientID %>");
var PriceTextbox = $("#<%= txtPurePrice.ClientID %>");
$([textbox[0], PriceTextbox[0]]).bind("change keyup keydown paste blur", function(e) {
    var Result;
    Result = (parseFloat(textbox.val()) / 100) * parseInt(PriceTextbox.val(), 10);
    ResultTextbox.val(Result);
});  

Live example (在代码中,我自然必须去掉 ASP.Net 的东西)

那个$([textbox[0], ResultTextbox[0]])有一点很棘手:我正在从两个原始元素(索引 0 处的元素)创建一个原始 DOM 元素数组。的textbox以及索引 0 处的元素的PriceTextbox ,然后将其传递到 $()将它们包装在 jQuery 对象中。

我用过 bind 绑定(bind)多个事件,覆盖我们的基地。

正如 @diEcho 指出的,我还将基数参数添加到 parseInt 。提供基数几乎总是最好的(除非您明确希望允许人们输入诸如“0xfe”之类的内容来表示 254)。

关于javascript - jQuery 计算 Text_Change 的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5946067/

相关文章:

jquery - TinyMCE 显示 html 标签

javascript - 刷新页面时从本地存储设置 CSS 样式

javascript - 如何嵌入谷歌地图?

javascript - 使用 jQuery/Javascript 计算 textarea 中字符串的出现次数,而不是在新按钮按下时更新

javascript - 根据按键上的数据列表验证输入文本数据

javascript - img onClick 不起作用

javascript - 将子级插入到 jQuery UI Accordion 的 DIV 中

javascript - 如何使用 JavaScript 拆分此字符串?

Javascript 函数打印到相同的 Span 元素

javascript - MEAN 应用程序,在服务器上发布之前我应该​​更改什么?