如何在 KeyUp 上进行文本框回发?
Posted
技术标签:
【中文标题】如何在 KeyUp 上进行文本框回发?【英文标题】:How do I make a Textbox Postback on KeyUp? 【发布时间】:2010-12-18 00:17:12 【问题描述】:我有一个文本框,可以更改 OnTextChanged 事件中下拉菜单的内容。当文本框失去焦点时,似乎会触发此事件。如何在 keypress 或 keyup 事件中实现这一点?
这是我的代码示例
<asp:TextBox ID="Code" runat="server" AutoPostBack="true" OnTextChanged="Code_TextChanged">
<asp:UpdatePanel ID="Update" runat="server">
<ContentTemplate>
<asp:DropDownList runat="server" ID="DateList" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Code" />
</Triggers>
</asp:UpdatePanel>
所以在代码隐藏中,我绑定了页面加载时的下拉菜单。 Code_TextChanged 事件只是重新绑定下拉列表。我希望这发生在每次按键时,而不是在文本框失去焦点时发生。
我最近继承了这段代码,这对我来说不是理想的方法,但是时间限制使我无法在 Web 服务方法中重写它。
我尝试使用 jQuery 绑定“keyup”事件以匹配文本框的“change”事件,但这仅适用于按下的第一个键。
【问题讨论】:
【参考方案1】:这对你有帮助吗?
How to make an ASP.NET TextBox fire it's onTextChanged event fire in an AJAX UpdatePanel?
【讨论】:
我试过这个,但它只适用于按下的第一个键。之后,文本框失去焦点,每次后续按键都不会触发事件。如您所见,与您推荐的帖子相反,我的文本框不在我的更新面板中,但它仍然失去焦点。【参考方案2】:这将解决您的问题。逻辑与凯尔建议的解决方案相同。
看看这个。
<head runat="server">
<title></title>
<script type="text/javascript">
function RefreshUpdatePanel()
__doPostBack('<%= Code.ClientID %>', '');
;
</script>
<asp:TextBox ID="Code" runat="server" onkeyup="RefreshUpdatePanel();" AutoPostBack="true" OnTextChanged="Code_TextChanged"></asp:TextBox>
<asp:UpdatePanel ID="Update" runat="server">
<ContentTemplate>
<asp:DropDownList runat="server" ID="DateList" />
<asp:TextBox runat="server" ID="CurrentTime" ></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Code" />
</Triggers>
</asp:UpdatePanel>
后面的代码是这样的......
protected void Code_TextChanged(object sender, EventArgs e)
//Adding current time (minutes and seconds) into dropdownlist
DateList.Items.Insert(0, new ListItem(DateTime.Now.ToString("mm:ss")));
//Setting current time (minutes and seconds) into textbox
CurrentTime.Text = DateTime.Now.ToString("mm:ss");
我已经添加了额外的文本框来查看变化,请删除文本框。
【讨论】:
同样的情况发生。当更新面板刷新文本框失去焦点 只需使用此解决方案删除 AutoPostBack="true" 即可。 Rick 的评论是正确的,去掉 AutoPostBack 就可以正常工作了 我在__doPostBack()
中的 Code.ClientID
上收到“文字字符过多”错误。
@vapcguy 使用双引号 "
而不是单引号,因为它只需要单引号之间的字符。【参考方案3】:
这是一种使用 javascript、更新面板、gridview、sqldatasource 和文本框的简单方法。当您键入时,它会搜索表格并显示结果。简短而甜美,没有代码。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test3.aspx.vb" Inherits="test3" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function runPostback()
document.forms["form1"].submit();
document.getElementById("TextBox1").focus();
function getFocus()
var text = document.getElementById("TextBox1");
if (text != null && text.value.length > 0)
if (text.createTextRange)
var FieldRange = text.createTextRange();
FieldRange.moveStart('character', text.value.length);
FieldRange.collapse();
FieldRange.select();
function SetDelay()
setTimeout("runPostback()", 200);
</script>
</head>
<body onload="getFocus()">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBox1" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="TextBox1" onkeyup="SetDelay();" runat="server"></asp:TextBox>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:purchasing2ConnectionString %>"
SelectCommand="SELECT [name] FROM [vendors] WHERE ([name] LIKE @name + '%')">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="name" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
【讨论】:
【参考方案4】:我使用 javascript 技巧来触发 OnTextChanged 事件, 我调用了一个模糊函数,然后重新聚焦输入文本 (或者,如果您有很多输入文本,则从两个输入文本切换焦点)
我已经在 IE 和 Firefox 中测试过。
javascript代码:
function reFocus(id)
document.getElementById(id).blur();
document.getElementById(id).focus();
aspx 代码
<asp:TextBox ID="txtProdottoLike" runat="server"
ontextchanged="txtProdottoLike_TextChanged"
onKeyUp="reFocus(this.id);"
AutoPostBack="True">
</asp:TextBox>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="Update" runat="server">
<ContentTemplate>
<asp:GridView ID="GridProdotto" runat="server" AllowPaging="False"
AllowSorting="False" ForeColor="#333333" GridLines="None"
OnSelectedIndexChanging="GridProdotto_SelectedIndexChanging"
Visible="True" Width="100%" Height="100%" AutoGenerateColumns="False">
<RowStyle BackColor="WhiteSmoke" Font-Size="11px" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Prodotto">
<ItemStyle Width="80px" HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Descrizione">
<ItemStyle HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:CommandField SelectText="Seleziona" ShowSelectButton="True" ItemStyle-HorizontalAlign="Right"></asp:CommandField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtProdottoLike" />
</Triggers>
</asp:UpdatePanel>
c# 函数“GridProdotto_SelectedIndexChanging”从数据库中检索数据并构建网格。
【讨论】:
以上是关于如何在 KeyUp 上进行文本框回发?的主要内容,如果未能解决你的问题,请参考以下文章
在 Bootstrap 中启动 Modals 时如何在文本框上进行 .focus()