ボタンクリックでクライアント側スクリプトを使用してテキストボックスを変更する方法

debugcn 投稿 Dev

ブライアンプレスラー

ASP.NETとAJAXWebformsを使用してインターフェイスを開発しています。ページの初期化時、および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プログラミングに慣れていないので、これを行う方法がわかりません。

これとこれを読みましたが、サーバーへの投稿を停止するボタンを取得する方法がわかりません。これは可能ですか？

ConnorsFan

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

TextBoxに挿入された数字が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 %>'は、ASP.NETによって実行される可能性のあるIDマングリングを説明するためにJavascriptコードで使用されます。

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]

編集2021-07-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

ボタンクリックでクライアント側スクリプトを使用してテキストボックスを変更する方法

ボタンクリックでクライアント側スクリプトを使用してテキストボックスを変更する方法

c＃スクリプトを使用してクライアント側のテキストボックステキストを変更する方法

ボタンをクリックしてJqueryを使用してテキストボックスを削除する方法

分度器タイプスクリプトを使用して_ngcontentとスパンボタンテキストで要素をクリックする方法

angle2のクリックイベントでボタンテキストを変更してボタンを無効にする方法

クリックボタンでテキストを変更

SeleniumとPythonを使用してリンクテキストでボタンをクリックする方法

クリック時にボタンのテキストを変更する方法

Icommandを使用してビューモデルのボタンクリックで数値型テキストボックスをクリアする方法

クリック可能なボタンでテキストを変更する

グリッドビュー内のボタンをクリックした後にテキストボックスのテキストを変更する方法

jQueryを使用してクリックしたボタンのテキストを変更する

クリックしたときにボタンタイプのテキストを変更する

AngularJSを使用してクリック時にボタンのテキストを変更する

javascriptを使用してクリック後にボタンのテキストを変更する

ボタンのtextViewのテキストサイズを変更する方法クリックしますか？

カスタムアダプタでボタンクリック時にボタンテキストを変更する方法

nightwatch.jsを使用してアラートボックスのOKボタンをクリックする方法

クリックしてテキストをテキストボックスに変更する方法

クリックしてテキストをテキストボックスに変更する方法

JavaScriptでクリックしてボタンのテキストを変更する

ボタンをクリックしてdivに画像とテキストボックスを追加する方法

ボタンクリックAjaxを介してテキストボックスの値を取得する方法

ブートストラップ4cssを使用してクリアボタンの色を変更して入力検索を変更する方法

ボタンクリックでボタンテキストを変更しても機能しない

クリックしたリストアイテムのボタンテキストをinnerHTMLに変更する方法

テキストボックスのクライアント側でYouTubeのURLを検証する方法

ボタンクリックでブートストラップアラートボックスを表示する

[次へ]および[前へ]ボタンをクリックしてテキストボックスの曜日を変更する方法

リクエストを使用してボタンを「クリック」する方法