NumericTextBox - 在用户输入数字时执行 JS 计算。可以吗?
NumericTextBox - Execute JS calculation as the user types numbers. Can it be done?
我有一个允许输入单价的数字文本框。当用户向上旋转数字时,单位价格和数量相乘以创建扩展价格。
我需要的是,如果用户键入值,计算也会发生,或者在他们键入时发生。现在,如果他们键入 unitPrice,则在他们选择或单击页面上的其他位置之前不会计算 extendedPrice。
有办法吗?
我是 C# 的新手,但我是一名资深开发人员。谢谢你的帮助。
<div class="form-group">
<div class="col-md-2">
@Html.LabelFor(model => model.UnitPrice, new { style = "width: 30px;" });
</div>
<div>
<div class="col-md-8">
@(Html.Kendo().NumericTextBox<int>()
.Name("unitprice")
.Events(e => e
.Change("calculateExtendedPrice")
.Spin("calculateExtendedPrice"))
.Decimals(2)
.Format("c")
.Min(0)
.Max(10000)
.Value(0)
.HtmlAttributes(new { style = "width: 20%" })
)
@Html.Label("Extended Price", new { style = "width: 100px;" })
<label id="extendedPrice" ></label>
</div>
</div>
</div>
脚本:
function calculateExtendedPrice() {
var unitPriceControl = $("#unitprice").data("kendoNumericTextBox");
var unitPrice = unitPriceControl.value();
var quantityControl = $("#quantity").data("kendoNumericTextBox");
var quantity = quantityControl.value();
//alert(unitPrice);
if (quantity == null || unitPrice == null) {
return;
}
var extendedPriceCalc = quantity * unitPrice;
$("#extendedPrice").text(extendedPriceCalc);
}
我不认为 Kendo UI 具有该功能,但您可以使用 jQuery 中的 keyup 事件处理程序来实现:
$('#unitprice').keyup(function() {
calculateExtendedPrice();
});
我有一个允许输入单价的数字文本框。当用户向上旋转数字时,单位价格和数量相乘以创建扩展价格。
我需要的是,如果用户键入值,计算也会发生,或者在他们键入时发生。现在,如果他们键入 unitPrice,则在他们选择或单击页面上的其他位置之前不会计算 extendedPrice。
有办法吗?
我是 C# 的新手,但我是一名资深开发人员。谢谢你的帮助。
<div class="form-group">
<div class="col-md-2">
@Html.LabelFor(model => model.UnitPrice, new { style = "width: 30px;" });
</div>
<div>
<div class="col-md-8">
@(Html.Kendo().NumericTextBox<int>()
.Name("unitprice")
.Events(e => e
.Change("calculateExtendedPrice")
.Spin("calculateExtendedPrice"))
.Decimals(2)
.Format("c")
.Min(0)
.Max(10000)
.Value(0)
.HtmlAttributes(new { style = "width: 20%" })
)
@Html.Label("Extended Price", new { style = "width: 100px;" })
<label id="extendedPrice" ></label>
</div>
</div>
</div>
脚本:
function calculateExtendedPrice() {
var unitPriceControl = $("#unitprice").data("kendoNumericTextBox");
var unitPrice = unitPriceControl.value();
var quantityControl = $("#quantity").data("kendoNumericTextBox");
var quantity = quantityControl.value();
//alert(unitPrice);
if (quantity == null || unitPrice == null) {
return;
}
var extendedPriceCalc = quantity * unitPrice;
$("#extendedPrice").text(extendedPriceCalc);
}
我不认为 Kendo UI 具有该功能,但您可以使用 jQuery 中的 keyup 事件处理程序来实现:
$('#unitprice').keyup(function() {
calculateExtendedPrice();
});