如何使用客户端脚本按钮单击修改文本框-解网

问：

我正在开发一个使用 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 编程的新手，所以我不确定如何去做。

我已经阅读了这个和这个，但我仍然无法弄清楚如何让按钮停止发布到服务器。这可能吗？

asp.net 应用程序 Web 窗体 Visual Studio-2005 客户端

<html>
	<head>
		<title> Test </title>
		<script> 
			function AddChar(btn_text){
 				
				document.getElementById("txt_my").value = document.getElementById("txt_my").value + btn_text;
				if(document.getElementById("txt_my").value.length>=5){
				alert("Do Youd DB work here");
				}
			}
	      </script>
	</head>
	<body>
		<input id ="txt_my" type ="text"  /> <br />
		<input type ="button" value="1" onclick ="AddChar(this.value)"  />
		<input type ="button" value="2" onclick ="AddChar(this.value)"  />
		<input type ="button" value="3" onclick ="AddChar(this.value)" /> <br>
		<input type ="button" value="4" onclick ="AddChar(this.value)" />
		<input type ="button" value="5"  onclick ="AddChar(this.value)" />
		<input type ="button" value="6" onclick ="AddChar(this.value)" /> <br>
		<input type ="button" value="7" onclick ="AddChar(this.value)" />
		<input type ="button" value="8"  onclick ="AddChar(this.value)"/>
		<input type ="button" value="9"  onclick ="AddChar(this.value)"/><br>
		<input type ="button" value="0" onclick ="AddChar(this.value)" />
	</body>
</html>

0赞 ConnorsFan 6/11/2016 #2

ASP.NET Button 具有一个属性，该属性允许设置服务器端事件处理程序。它还具有一个属性，该属性可以包含一些客户端代码，以便在单击按钮时首先执行。如果该客户端代码返回，则取消回发到服务器。OnClickOnClientClickfalse

这两个属性都可以在按钮的标记中设置：

<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" />
...

如果 TextBox 中插入的数字少于 5 位，则 Javascript 函数应返回：addDigitfalse

<script type="text/javascript">
    function addDigit(btn) {
        var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
        txtPIN.value += btn.value;
        return txtPIN.value.length >= 5;
    }
</script>

该脚本块可以位于 HTML 文档的部分或表单的底部。<Head>

代码隐藏中的事件处理程序将执行 PIN 验证：

protected void btn_Click(object sender, EventArgs e)
{
    // Check database to validate the PIN
    string pin = txtPIN.Text;
    ...
}

注意：Javascript 代码中使用该语法来解释 ASP.NET 可能执行的 ID 篡改。'<%= txtPIN.ClientID %>'

我注意到你的UI中有一个按钮。如果它删除了最后一位数字，您还可以在客户端代码中处理该命令并返回以防止回发：Backfalse

<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);
}

事实上，脚本块通常放在表单的底部（参见 stackoverflow.com/questions/2451417/...）。就您而言，它应该在两个地方都有效。把它放在底部的好处是，一些涉及 HTML 元素的代码可以立即执行，如果代码在该部分中，则不起作用（因为元素尚未加载）。head

0赞 Brian Pressler 6/13/2016

很高兴知道！非常感谢您的帮助。

上一个：Teradata 作为 webapp 后端？

下一个：Qooxdoo 客户端保护机制

如何使用客户端脚本按钮单击修改文本框

How to use client side script on button click to modify text box

评论

评论