ASP.NET で TextBox がボタンのポストバックを引き起こす
質問
ASP.NET 2.0、FF3 および IE7 でテスト中。
テキスト ボックスから「Enter」ボタンを押すと、ページ内の最初の ImageButton に対応する「OnClick」イベントが発生します。その画像ボタンを削除すると、ページ上で次の ImageButton OnClick イベントが発生します。
FireBug コンソールから JavaScript を使用してフォームを送信すると、このようなことは起こりません。しかし、何らかの理由でテキスト ボックスから Enter キーを押すと、無関係な ImageButton イベントがトリガーされます。
見つけました この質問 これにも同様の問題がありましたが、ImageButtons には「UseSubmitBehavior」プロパティがないため、その解決策に対する提案された答えは機能しません。
なぜこのイベントが発生するのかわかりません。Request.Form を見ると、__EVENTTARGET が空で、実際にはフォームの内容全体 (すべてのテキストボックス) が投稿されていますが、imageButton.x および imageButton.y のキーと値のペアも含まれていることがわかります。
どうしてこれなの?JavaScript を使用してこれらのテキスト ボックスからの「Enter」キーの押下を検出できると思いますが、私の過去の経験では、この動作はブラウザ間で大きく異なるということです。助言がありますか?
解決
aspパネルまたはフォームにデフォルトボタンを設定してみてください。これにより、ユーザーがEnterキーを押したときの動作を制御できます。
他のヒント
こちらがよりエレガントなソリューションです
<asp:TextBox ID="TextBox1" runat="server"
onkeydown = "return (event.keyCode!=13);" >
</asp:TextBox>
投稿全体を読むこちら
私のプロジェクトでも同じ問題が発生しています。
この問題は、ASP.NET が原因で発生します。 いつも を継承する最初の要素が想定されます。 IButton
インターフェイス (Button および ImageButton) は、ページのデフォルトのボタンです。
皮肉なことに、Button または ImageButton の代わりに LinkButton を使用すると、この問題は解決されます。
さらに詳しい情報を見つけることができます MSDNのこちら.
Enterキーの押下を無効にできるため、ユーザーはImageButtonsをクリックする必要があります。このjavascriptブロックをページに貼り付けるだけです:
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
最近、Webサービスを使用してクライアントでより多くのポストバックを実行しています。フォーム要素の外側にコントロールを移動する(または完全に削除する)ことで、問題はなくなります。 aspxページにデフォルトで挿入されますが、最近まで私はほとんど何をする必要もないと思いました。
これは、非テキスト領域でEnterボタンを押してフォームをポストバックするデフォルトの動作です。ポストバックを停止するには、javascriptメソッドで処理する必要があります。
window.event.keyCodeプロパティをチェックして、13に等しいかどうかを確認する必要があります。等しい場合は、0にリセットします。
function KeyPress()
{
if (window.event.keyCode == 13)
{
window.event.keyCode = 0;
}
}
<!> quot; enter <!> quot;を検出できたと思います。 javascriptを使用してこれらのテキストボックスからキーを押す
それは私がその振る舞いを回避するためにしたことであり、IE7とFF3でうまく機能します。少し不自然です。
一般的な例は次のとおりです。
function TextBox1_KeyDown(sender, e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
if(key == 13 && $("#TextBox1").val() != "")
{
WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("TextBox1", "", true, "", "", false, true));
}
return (key != 13);
}
トリガーにバリデーターが必要なため、WebForm_DoPostBackWithOptionsを使用しました。それ以外の場合は、__ DoPostBackを使用できます。
ここに<!> quot; prototypes <!> quot;:
function __doPostBack(eventTarget, eventArgument)
function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit)
{
this.eventTarget = eventTarget;
this.eventArgument = eventArgument;
this.validation = validation;
this.validationGroup = validationGroup;
this.actionUrl = actionUrl;
this.trackFocus = trackFocus;
this.clientSubmit = clientSubmit;
}
function WebForm_DoPostBackWithOptions(options)
お役に立てば幸いです。
PS:ここではJQueryを使用しましたが、$ getは同じです。
ここに私が見つけたエレガントな解決策があります。他の誰かがこの問題を抱えている場合(他のすべての解決策が私には役に立たなかったのであなたには役に立たない場合):
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel runat="server" DefaultButton="doNothingButton">
<ul id="shopping-list-ul">
</ul>
<asp:Button CssClass="invisible" runat="server" ID="doNothingButton" OnClientClick="return false;" />
</asp:Panel>
</ContentTemplate>
テキストボックスiselfはul(javascriptによって生成された)内にありました。
Enterキーを押すと<!> quot; doNothingButton <!> quot;がトリガーされ、クライアント側でfalseが返され、ポストバックがまったく発生しません!