如何在单击按钮时使用客户端脚本来修改文本框
布赖恩·普勒斯勒
我正在使用ASP.NET和AJAX Webforms开发界面。在页面初始化时以及在请求各种操作以使用PIN验证用户身份后，它会显示一个更新面板。该界面将主要用于平板电脑，因此我创建了一个带有按钮的小键盘，用于收集用户的PIN码，如下所示：
单击按钮后，它们将运行：
protected void btn0_Click(object sender, EventArgs e)
{
AddNumberToPin("0");
}
他们以标有编号的参数作为参数调用的过程strDigit定义为：
protected void AddNumberToPin(string strDigit)
{
txtPIN.Text += strDigit;
if (txtPIN.Text.Length == 5)
{
...
...check database to validate the pin
...
}
}
这行得通，但是它非常慢，因为每次单击按钮都会创建另一次往返于Web服务器的往返。将收集到的PIN存储在客户端上的本地变量中，然后仅在收集到5位数字之后才将其发布到服务器，这似乎很简单。我是Web编程的新手，所以不确定如何执行此操作。
康纳斯·范
我注意到 Back 您的UI中有一个 按钮。如果删除了最后一位，您还可以在客户端代码中处理该命令并返回
ASP.NET按钮具有OnClick允许设置服务器端事件处理程序的属性。它还具有一个OnClientClick属性，该属性可以包含一些单击该按钮时首先执行的客户端代码。如果该客户代码返回false，则取消向服务器的回发。
可以在按钮的标记中设置这两个属性：
<asp:TextBox ID="txtPIN" runat="server" />
<asp:Button runat="server" Text="0" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
<asp:Button runat="server" Text="1" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
<asp:Button runat="server" Text="2" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
...
如果在文本框中插入的数字少于5位，则JavascriptaddDigit函数应返回false：
<script type="text/javascript">
function addDigit(btn) {
var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
txtPIN.value += btn.value;
return txtPIN.value.length >= 5;
}
</script>
该脚本块可以在<Head>HTML文档的部分或表单的底部。
后台代码中的事件处理程序将执行PIN验证：
protected void btn_Click(object sender, EventArgs e)
{
// Check database to validate the PIN
string pin = txtPIN.Text;
...
}
注意：'<%= txtPIN.ClientID %>'Javascript代码中使用了该语法，以说明由ASP.NET执行的可能的ID修改。
我注意到 Back 您的UI中有一个 按钮。如果删除了最后一位，您还可以在客户端代码中处理该命令并返回
false 以防止回发：
<asp:Button ID="btnBack" runat="server" Text="Back" OnClientClick="removeLastDigit(); return false;" />
使用以下功能添加到Javascript块中：
function removeLastDigit() {
var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
txtPIN.value = txtPIN.value.substring(0, txtPIN.value.length - 1);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在asp.net中验证客户端的文本框，而无需单击任何按钮
- 2
客户端验证根据按钮单击时的空文本框触发
- 3
如何使用C＃脚本在客户端更改文本框文本
- 4
如何使用客户端脚本设置Dojo列表文本框的标签和值
- 5
更改文本框，触发客户端事件和服务器事件后，ASP.NET单击按钮
- 6
如何在文本框中在客户端验证youtube url
- 7
文本框的客户端验证
- 8
文本框的客户端验证
- 9
按钮单击wpf时如何验证空文本框？
- 10
单击“编辑”按钮时如何在gridview中获取文本框值？
- 11
单击按钮时如何在文本框中显示不同的sql数据
- 12
如何在单击按钮时在div内显示文本框的内容？
- 13
单击相应按钮时如何在文本框中附加特殊符号
- 14
如何在单击按钮时在div上添加图像和文本框
- 15
单击kendo按钮时如何在div中添加新的文本框？
- 16
单击按钮时使用文本框值更新面板
- 17
AJAX：如何在单击按钮时在客户端和服务器端更改值？
- 18
单击按钮时显示文本框
- 19
当使用JavaScript中的单个功能单击其他单选按钮时，如何禁用文本框？
- 20
如何使用 angular 在单击按钮时启用禁用的文本框
- 21
如何在 C# 中使用文本框和按钮单击过滤 datagridview？
- 22
使用javascript文本框进行客户端验证
- 23
当使用javascript或jQuery从填充的文本框中选择任何值时，如何在不单击提交按钮的情况下提交表单
- 24
如何在文本框中创建发票编号并在单击按钮时自动增加发票编号？
- 25
如何在文本框中创建发票编号并在单击按钮时自动增加发票编号？
- 26
如何在文本框中显示 JSON 条目并在单击按钮时在字符串中移动？
- 27
单击按钮时无法显示文本框中的文本？
- 28
如何使用线程而不是打开终端的多个实例并多次运行脚本来“生成”多个TCP客户端？
- 29
如何使服务器在单击按钮时向客户端发送消息
我来说两句