C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[3]: イメージボタンがエンターキーを押下したときに動作してしまう


(過去ログ 130 を表示中)

[トピック内 4 記事 (1 - 4 表示)]  << 0 >>

■77216 / inTopicNo.1)  イメージボタンがエンターキーを押下したときに動作してしまう
  
□投稿者/ どらーな (1回)-(2015/09/27(Sun) 23:33:48)

分類:[.NET 全般] 

初めて投稿させて頂きます。

.aspxファイルでイメージボタンを設置していて、Enterを押したときはイメージボタンが動作せず、普通にイメージボタンを押したときのみ
動作するようにしたいと思っていますが、Enterを押したときにブラウザの仕様でボタンが動作してしまいます。

現状としては、

----------------------------------------
<asp:ImageButton id="<コントロールID>"
ImageUrl="<URL>"
ImageAlign="<画像の配置位置>"
AlternateText="<ラベル>"
OnClick="<イベント・ハンドラ>" runat="server" />
----------------------------------------

のようなイメージボタンを使い、.csファイルにボタンの動作を記述しています。

やりたいこととしては、Enterキーを推してもイメージボタンが押されないようにし、かつイメージボタンを押下した際はきちんと動作するようにしたいです。



解決のためにいくつかサイトを拝見して以下の方法を試してみましたが、上手くいきません。

・Javascriptを使い、keycode=13の時のみボタンが押される
→押下したとき、Enterキー両方とも0が返ってくるので上手くいかないです

・onserverclickイベントを使用し、動作を制御する
→enterで更新されなくはなったが、ボタンの押下も出来なくなってしまった

・先頭に見えないダミーボタンを設置
→直接コードをいじったりすると高さ幅を0にしても見えてしまう状態になり、IEのバージョンによっては何もしてなくても見えてる状態になってることがあります。


かなり調べたのですが解決せず困っています...

今回はなるべくイメージボタンで希望する動作をしたいと思っています。

良い解決法があればご教授いただきたいと思っています、よろしくお願いします(返信が少し遅くなるかもしれません。すみません)


引用返信 編集キー/
■77217 / inTopicNo.2)  Re[1]: イメージボタンがエンターキーを押下したときに動作してしまう
□投稿者/ WebSurfer (655回)-(2015/09/28(Mon) 12:43:03)
No77216 (どらーな さん) に返信

> Enterを押したときはイメージボタンが動作せず、普通にイメージボタンを押したときのみ
> 動作するようにしたいと思っていますが、Enterを押したときにブラウザの仕様でボタンが
> 動作してしまいます。

ブラウザ上で ImageButton にフォーカスが当たっている時に Enter キーを押すとポストバッ
クされますが、JavaScript でそれを防止し、マウスでクリックした時だけポストバックがかか
るようにしたいということですか?

そうであれば、そのページの Load イベントなどで以下のようにしてはいかがですか?

ImageButton1.Attributes["onkeydown"] = "if (event.keyCode == 13) return false;";

やりたいことはそうではないという場合は、どこがやりたいことと違うのか連絡ください。
引用返信 編集キー/
■77239 / inTopicNo.3)  Re[2]: イメージボタンがエンターキーを押下したときに動作してしまう
□投稿者/ どらーな (2回)-(2015/09/30(Wed) 07:49:26)
WebSurferさん


返信遅くなりました。ご回答ありがとうございます。

試したところ、希望する動作になりました!

Loadイベントで動作を制御すれば良かったんですね...とても勉強になりました。


No77217 (WebSurfer さん) に返信
> ■No77216 (どらーな さん) に返信
>
>>Enterを押したときはイメージボタンが動作せず、普通にイメージボタンを押したときのみ
>>動作するようにしたいと思っていますが、Enterを押したときにブラウザの仕様でボタンが
>>動作してしまいます。
>
> ブラウザ上で ImageButton にフォーカスが当たっている時に Enter キーを押すとポストバッ
> クされますが、JavaScript でそれを防止し、マウスでクリックした時だけポストバックがかか
> るようにしたいということですか?
>
> そうであれば、そのページの Load イベントなどで以下のようにしてはいかがですか?
>
> ImageButton1.Attributes["onkeydown"] = "if (event.keyCode == 13) return false;";
>
> やりたいことはそうではないという場合は、どこがやりたいことと違うのか連絡ください。
引用返信 編集キー/
■77240 / inTopicNo.4)  Re[3]: イメージボタンがエンターキーを押下したときに動作してしまう
□投稿者/ WebSurfer (660回)-(2015/09/30(Wed) 10:08:08)
No77239 (どらーな さん) に返信

> Loadイベントで動作を制御すれば良かったんですね

思い違いをされていると思います。「動作を制御」しているのではありません。

サーバー側の Load イベントで行っていることは、ASP.NET が ImageButton を html 
コードの input type="image" 要素にレンダリングする際、onkeydown 属性に 
JavaScript のコードを設定するようにしているだけです。

結果、以下のようなコードになります。html ソースを見てください。

<input type="image" ... 
   onkeydown="if (event.keyCode == 13) return false;" 
   ...  />

その後はサーバーは関係なくて、クライアント側だけでの JavaScript による制御の話
になります。このコードにより、Enter キーが押されたときは false が返されるよう
になり、form は submit(ポストバック)されなくなるということです。

Web アプリ開発は、サーバー側で起こっていることとクライアント側で起こっているこ
との違いを強く認識して行いましょう。そうでないと、今後の開発で間違いなくハマり
ます。

#問題は解決したそうですので、「解決済み」にしておきます。

解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -