我正在开发一个网络表单,当前有一个文本更改事件触发器:
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/