如何使用客戶端腳本上的按鈕單擊修改文本框

-1

我正在開發一個使用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 
     ... 
    } 

}

這WOR ks，但是它非常慢，因爲每次點擊按鈕都會創建另一個到Web服務器的往返行程。這似乎應該很簡單，將收集的PIN存儲在客戶端的本地變量中，然後只在收集了5位數字後才發送到服務器。我是網絡編程新手，所以我不知道如何去做這件事。

我讀過this和this，但我仍然無法弄清楚如何讓按鈕停止發佈到服務器。這可能嗎？

來源

2016-06-10 Brian Pressler

ASP.NET Button有一個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" /> 
...

的JavaScript addDigit函數應該返回false如果小於5點的數字都在文本框中插入：

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

注：語法'<%= txtPIN.ClientID %>'在Javascript代碼用來解釋可能的ID重整由ASP.NET進行。

我注意到您的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); 
}

來源

2016-06-11 01:46:40 ConnorsFan

這是完美的讓我走上正軌！非常感謝！我不確定在哪裏放置腳本，因此我在答案中添加了一行。對大多數人來說可能是顯而易見的......但是爲了像我這樣的新手的利益。 :) –

事實上，腳本塊通常放在窗體的底部（請參閱http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-外放剛剛之前，該體）。在你的情況下，它應該在兩個地方工作。將它放在最後的優點是，一些涉及HTML元素的代碼可以立即執行，如果代碼位於「head」部分中（因爲元素尚未加載），該代碼無效。 – ConnorsFan

很高興知道！非常感謝你的幫助。 –

這裏有兩件事情可以做在客戶端使用JavaScript，你正在做的，現在在服務器端：用文本框的值

檢查

的毗連一個號碼，如果文本框的長度> = 5. 下面的腳本會告訴你怎麼做這些在客戶端

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

來源

2016-06-10 23:43:25 samirk433

如何使用客戶端腳本上的按鈕單擊修改文本框

回答

相關問題