刚刚填写的文本框失去焦点后如何调用事件？答案

【问题标题】：How to invoke an event after losing focus from a textbox that was just filled out?刚刚填写的文本框失去焦点后如何调用事件？
【发布时间】：2011-03-16 07:52:35
【问题描述】：

我有两个文本框：A 和 B 使用 Html.textboxfor。启用文本框“A”，禁用文本框“B”。

当我在文本框“A”中键入值并将焦点从文本框移开时，文本框“B”应该填充一些值。

例如：我正在输入TextBox A = "King"的值；如果焦点从框中丢失，文本框 B 中的值应为“彼得”，应自动填充。

【问题讨论】：

我不确定 ASP，但您应该听的事件是 blur
似乎可以通过 jquery onblur() 解决，但是您想在文本框 A 和文本框 B 上的内容显示之间应用任何逻辑吗？如果它与数据查询相关，您可能还需要在 jquery 模糊事件中使用 ajax 调用

标签： c# .net jquery asp.net-mvc-2

【解决方案1】：

你可以给文本框一个 onblur 属性并调用一个方法来填充第二个文本框

类似：

   <script language="javascript">
       function fllB()
       {
          var txtB = document.getElementById("txtB");
          var txtA = document.getElementById("txtA");

          if (txtA.value == "King")
          {
              txtB.value = "Peter";
          }
        }
    </script>

<input type="text" id="txtA" onblur="fillB()" />
<input type="text" id="txtB" />

【讨论】：

【解决方案2】：

以下是我编写的用于验证输入“价格”货币值的 javascript 函数。

<script language="javascript">
function validatePrice(textBoxId) {
    var textVal = textBoxId.value;
    var regex = /^(\$|)([1-9]\d{0,2}(\,\d{3})*|([1-9]\d*))(\.\d{2})?$/;
    var passed = textVal.match(regex);
    if (passed == null) {
        alert("Enter price only. For example: 523.36 or $523.36");
        textBoxId.Value = "";
    }
}

如果您想在文本框失去焦点后触发验证，请使用“onblur”事件，该事件与大多数 WinForm 控件中的 OnLostFocus() 相同。

<asp:TextBox ID="TextBox19" runat="server" Visible="False" Width="183px" 
                onblur="javascript:return validatePrice(this);"></asp:TextBox>

【讨论】：

【解决方案3】：

既然您使用的是 ASP.NET，为什么不使用像 asp:textbox 这样的 .NET 工具箱。也会更容易维护。

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
    if (TextBox1.Text == "King")
    {
        TextBox2.Text = "Peter";
    }
}

【讨论】：

【解决方案4】：

您似乎希望始终禁用第二个文本框？如果是这样，请在文本框中包含 disabled 属性：

<%: Html.TextBoxFor( x => x.XXX, new { id = "txtA" }) %>    
<%: Html.TextBoxFor( x => x.XXX, new { id = "txtB", disabled="true" }) %>

对于 JavaScript，我假设您使用的是 mvc 中包含的 jquery：（如果您不想在从框 A 中删除值的情况下清除 txtb，则删除 else 语句）

    $(function() 
{
    $("#txtA").change(function()
    {
        if ($("#txtA").val().length > 0) {

            $("#txtB").val(function()
            {
                // Do something to populate #txtb ex: Peter
                var myVar = "Peter";

                return myVar;
            }); 
        }
        else 
        {
            $("#txtB").val("");
        }
    });
});

【讨论】：

【解决方案5】：

jQuery:

<script type="text/javascript">
  $(function()
  {

    $("#txtA").change(function()
    {
      if(this.value == "King") 
        $("#txtB").attr("disabled", "").val( "Peter" );
    });

  });
</script>

【讨论】：