当BLUR事件不触发时

Question

最近从编写小型vb应用程序转向Web应用程序。目前还没有切换到C#。

尝试在ASP.net表单中添加几个文本框，并在另一个文本框中显示结果。

这是在ASP.NET 4.0表单上使用FormView控件插入模式的。问题是，无论我是否点击文本框，或者通过Tab进入或退出文本框，它似乎都没有触发JavaScript。

<script language="javascript" type="text/javascript">
function SumCalc() 
{
    Window.alert("On Blur");
    var num1 = parseInt(document.getElementById("LeaveHoursTextBox").value);
    var num2 = parseInt(document.getElementById("LeaveHours2TextBox").value);
    var num3 = parseInt(document.getElementById("LeaveHours3TextBox").value);
    var TotalTime = num1 + num2 + num3

    document.getElementById("HoursTextBox").value = TotalTime;
}
</script>

以下是我的html的一部分。页面很长，所以我没有发布全部内容...

<asp:TextBox ID="LeaveHoursTextBox" runat="server" 
Text='<%# Bind("LeaveHours") %>' 
onblur = "return sumCalc()"/>

- dibblm

Answer 1

Javascript是大小写敏感的。将调用改为return SumCalc()，而Window.alert不起作用，请改用window.alert或者只使用alert。

此外，从onblur = "return sumCalc()"中移除空格，有效的HTML应该是onblur="return sumCalc()"。

- Michal Klouda

---

最好使用jQuery，看这个fiddle，我认为它正是你所需要的。 - Michal Klouda

未触发。我正在尝试这里.. 好的.. 将 Class=XX 添加到 <asp：TextBox ID="LeaveHoursTextBox" runat="server" Text='<%# Bind("LeaveHours") %>' class="xx"/>添加到所有 3 个文本框<script type="text/javascript"> $('.xx').blur(function () { var sum = 0; $.each($('.xx'), function (i, item) { sum += parseInt($(item).val()) || 0; }); $('#leaveHours').val(sum); }); </script> - dibblm

没有足够的声望来聊天。 - dibblm

让我们尝试一些简单的东西，只是为了看看我们是否能够正确触发jQuery。我重新添加了警报以查看我们是否正在触发，但它没有到达这里。 - dibblm

Michal。我们在这些方法上很接近，但我无法使用ASP表单使它们工作。我确实让JQuery示例起作用，并不得不将积分提供给他，因为这完成了我的解决方案。非常感谢你的帮助，如果可以的话，我也会为你的辛勤工作发放结果。 - dibblm

Answer 2

有两个问题:

一

将onblur="return sumCalc()"更改为onblur="return SumCalc()"/>

你调用的JS函数中有一个拼写错误。

二

将window.alert("On Blur");更改为alert("On Blur");

- Muthu Kumaran

Answer 3

通过 jQuery 的 blur 函数进行绑定：http://api.jquery.com/blur/

你可以这样做：

$("#LeaveHoursTextBox").blur(function(){
    Window.alert("On Blur");
    var num1 = parseInt(document.getElementById("LeaveHoursTextBox").value);
    var num2 = parseInt(document.getElementById("LeaveHours2TextBox").value);
    var num3 = parseInt(document.getElementById("LeaveHours3TextBox").value);
    var TotalTime = num1 + num2 + num3

    document.getElementById("HoursTextBox").value = TotalTime;
})

- silviomoreto

---

我完全无法让它触发，还不得不进行一些微小的更改。----------- $（document.getElementById（“LeaveHours2TextBox”））。blur（function（）{ - dibblm

你不能在第二个选项中使用jQuery... $("#LeaveHoursTextBox"). 已经选择了具有 LeaveHoursTextBox id 的元素。你必须添加一个调用此函数的方法... 比如 $(document).ready()。 - silviomoreto

尝试添加以下内容：<script type="text/javascript">$(document).ready(function() { $("#LeaveHoursTextBox").blur(function () { Window.alert("On Blur"); var num1 = parseInt(document.getElementById("LeaveHoursTextBox").value); var num2 = parseInt(document.getElementById("LeaveHours2TextBox").value); var num3 = parseInt(document.getElementById("LeaveHours3TextBox").value); var TotalTime = num1 + num2 + num3 document.getElementById("HoursTextBox").value = TotalTime; }) });</script> - silviomoreto

以下的程式碼無法運行：</script><script type="text/javascript"> $(document).ready(function () { $("#LeaveHoursTextBox").blur(function () { Window.alert("On Blur");
}) }); </script> 它無法看到 #LeaveHoursTextBox。如果這是一個常規頁面上的標準文本框，這很可能會起作用。請記住這是一個生成的表單。但以下的程式碼可以運行：$("input[type=text][id*=LeaveHoursTextBox]").blur(function () { alert("hi") }); - dibblm

我必须得承认，除了将初始值设置为“0”并更改一行代码以符合您上述的解决方案之外，我终于成功让它工作了。 - dibblm