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

Posted 2023-04-13

【中文标题】刚刚填写的文本框失去焦点后如何调用事件？

【英文标题】：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 调用

【参考方案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]\d0,2(\,\d3)*|([1-9]\d*))(\.\d2)?$/;
    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>