javascript - 当文本更改且文本框不失去焦点时调用方法

标签 javascript c# jquery asp.net webforms

我正在开发一个网络表单,当前有一个文本更改事件触发器:

protected void txtBox1_TextChanged(object sender, EventArgs e)
  {
     Validate();
  }

我遇到的问题是,只有当用户在框中输入文本并且焦点丢失时才会触发。

我遇到问题的具体场景是:

  • 用户在文本框控件中输入文本。
  • 用户在文本框控制之外进行点击/选项卡操作。
  • 文本框触发器按预期运行,并在控件上显示验证错误。
  • 然后用户单击/按 Tab 键返回文本框控件,突出显示现有文本并删除。
  • 文本更改后需要在此处运行函数来重置验证消息。
  • 无需离开控件即可更新文本。
  • 用户点击/选项卡超出控制范围,文本更改触发器再次运行。

最佳答案

这出现在您的 .aspx 页面上:

<asp:TextBox runat="server" ClientIdMode="static" id="txtBox1">

<script type="text/javascript">
$("#txtBox1").on('input propertychange paste', function(){
    $.ajax({
        type: "POST",
        url: "api/MyValidator/ValidateTextBox?text=" + $("#txtBox1").val()
    }) //close AJAX call
    .done(function (resp){
        if(!resp.Valid) {alert('Not valid: ' + resp.msg);}
    }); //close Done handler
}); //close change handler
</script>

以下是 Web API 函数,它将检查数据库并回复 AJAX 请求。

public ValidationResponse ValidateTextBox(string text)
{
    //check your database. If it's good, set valid to true, otherwise false. If not valid, then set reason to the reason why it's not valid.
    bool valid;
    string reason;

    //construct response
    var response = new ValidationResponse(){ Valid = valid, msg = reason};

    //return response
    return response;
}

此外,将此类放在某处:

public class ValidationResponse
{
    public bool Valid {get; set;}
    public string msg {get; set;}
}

我们使用 How to detect a textbox's content has changed 提供的示例检测文本框值何时发生变化。当它发生变化时,我们会生成 AJAX使用 jQuery 调用我们的 Web API ,我们返回一个响应,表明它通过或失败的验证。然后,我们使用 .done() 中的客户端代码来检查 Web API 的响应,并在失败时显示验证失败消息。

我知道这看起来像是很多代码来检查单个文本框。但是,通过一些操作,您可以让它通过单个 AJAX 调用来验证整个表单,并且代码不会比我们现在拥有的代码多多少。

请注意,我故意省略了一些基本的 Web API 配置,因为在一个答案中需要讨论很多内容。我在这里的目的不是给您一个“即插即用”的答案,而是向您展示一旦您了解了 AJAX 和 Web API 的基础知识,使用良好的架构是多么容易。

关于javascript - 当文本更改且文本框不失去焦点时调用方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27135961/

相关文章:

javascript - CSS 不适用于 jquery 表上新添加的行

javascript - 为什么 'this' 在 Promise 调用中未定义

c# - 将包含大量 "locks"的代码重构为更多无锁代码

c# - Entity Framework 1对0或1关系配置

javascript - Office.js 使用内联 CSS 在 ContentControl 中格式化 HTML

javascript - 为什么JS不提供一种简单的方法来对对象执行深复制呢?

c# - 如何在电子表格中包含 Open XML 电子表格 "uncollapse"单元格?

javascript - 用 JavaScript 替换 HTML 改变了样式,图像不再水平内嵌

javascript - 如何获得数组中正确的数组和?

javascript - 更改表列顺序