- PR -

KeyEnter押下時にButton_Clickイベントを発生させる　使用言語C#

«前のページへ 1|2|3 次のページへ»
投稿者投稿内容
たけくん
ベテラン
会議室デビュー日: 2003/08/19
投稿数: 63
投稿日時: 2003-09-18 14:06
ぴでさん、ともさん、書き込みありがとうございます。
早速ぴでさんのScriptを使わせていだき無事動きました。
ありがとうございました。

<script language="JavaScript">
　function chkEnter(){
　　if(window.event.keyCode == 13){
return false;
　　}
　return true;
　}

　function chkSearch(){
　　if(event.keyCode==13){
　　　if(event.srcElement.tagName=="INPUT" && event.srcElement.type=="text"){
document.TeleKey0060.Submit1.click();
　　　}
　　　return false;
　　}
　　else{
　　　return true;
　　}
　}
</script>

<INPUT id="Submit1" type="submit" runat="server" CausesValidation="False" style="BACKGROUND-IMAGE: url(./image/search_b.gif); WIDTH: 48px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 21px; BORDER-BOTTOM-STYLE: none" name="search">

<asp:textbox id="txtSearchLocationName" onkeydown="return chkSearch();" runat="server" Width="135px" CssClass="textcontrols"></asp:textbox>

このような形で作成しました。
If文でTextBoxかどうかを見分けますが、ほかにもTextBoxあり、ほかのものでは検索手は困るので、結局、呼び出す関数を二つにしました。なので、ひとつIf条件がいらなくなるわけですか、そこのところはこのあと修正します。

で、実際に動作を見ていると、Retuenを押すと、一番最初に述べた特定の画面へ移動する不具合が気になってきました。
特定のページへ移動というのは、そのページへ移動するためのボタンが（仮にButtonAとします）クリックされてしまうわけです。
確か、ひとつのFormで囲ってある場合、Returnを押すとSubmitボタンが勝手に実行されると学んだ気がするので、ButtonAがSubmitなのかなと思ったりしたのですが、普通のASPのImageButtonなのでSubmitされるはずはないと思うのですが…。

この問題については、システム開発が一段落したら原因調査したいと思います。

で、今回ひしひしと思ったのですが、画面設計においてはどういうことをしたいかをよく考えて設計しないとあとで思わぬところで不具合や苦労をするんだなと感じました。
本当に勉強になりました。


たけくん
ベテラン
会議室デビュー日: 2003/08/19
投稿数: 63
投稿日時: 2003-09-18 19:37
上記のように書いたあと不具合が新たに見つかりました。
ひとつ直せばまた別のといういたちごっこに陥っております。

それはクッキーの問題です。
TextBoxにて↓Buttonを押すと、クッキーの設定をクライアント側でしていると、今まで入力した文字が出てくると思います。
そのときに、リストに出てきたものを選択してEnterを押すと、Submit処理が走るようです。このときに問題なのは、Enterを押すとSubmitが走るため、リストに出てきた項目をEnterで選択できなくなってしまいます。

つまり、リストで選択して確定してEnterを押してSubmit処理を行いたいのに、Enterを押すとTextBoxにリストで選択したものが入らずにTextBoxが空欄のまま検索処理が行われてしまいます。

If文でリストから出てきたものをクリックする場合と、そうでない場合と分けることは可能なのでしょうか？

もう少しこのトピックにお付き合いいただき、ご教授していただけますようお願いします。
まゆりん
ぬし
会議室デビュー日: 2002/08/12
投稿数: 539
お住まい・勤務地: よこはま
投稿日時: 2003-09-18 20:49
それはクッキーではなくてオートコンプリートです。

いっそのこと、オートコンプリートできないようにしてしまうのも手です。
<form id="Form1" autocomplete="off" >
でフォーム内全てのコントロールに対するオートコンプリートが無効になるはずです。
（手元に環境がないので未確認ですが・・・）

【追記】
どうしてもオートコンプリートを生かしたい場合の処理は
やったことがないので分らないです・・・。
ただ、JavaScriptを使わず普通にSubmitButtonとTextBoxを作って試してみたら
オートコンプリートでEnterキーを押してもSubmitはかかりませんでした。


[ メッセージ編集済み 編集者: まゆりん 編集日時 2003-09-18 21:27 ]
たけくん
ベテラン
会議室デビュー日: 2003/08/19
投稿数: 63
投稿日時: 2003-09-18 21:30
まゆりんさん、書き込みありがとうございます。
------------------------------------------------
それはクッキーではなくてオートコンプリートです。
------------------------------------------------
指摘ありがとうございます。勉強不足です。
これについても勉強します。

オートコンプリートは作成者側で決められるんですね。勉強になりました。

で、オートコンプリートをOFFにする手は、最終手段としたいと考えたいです。
これについてはお客様との仕様を詰めて決めなくてはいけないのですが、
オートコンプリートを仮に使わないとすると、全ての画面でOFFにする必要が出てきます。
その場合、どこをOFFでどこをONにするかでもめた場合にじゃあ全部使えるようにしてよという要望がくる可能性が高いので...。
ぴで
大ベテラン
会議室デビュー日: 2002/10/10
投稿数: 123
お住まい・勤務地: 東京
投稿日時: 2003-09-19 00:12
引用:
つまり、リストで選択して確定してEnterを押してSubmit処理を行いたいのに、Enterを押すとTextBoxにリストで選択したものが入らずにTextBoxが空欄のまま検索処理が行われてしまいます。
空欄となるのをブロックするなら単純に
if(event.srcElement.tagName=="INPUT" && event.srcElement.type=="text" && event.srcElement.value!="")
としてやればできますが、
1文字でも入力された状態で更にオートコンプリートでEnter押下した場合は、
event.srcElement.value!=""とならないため、submitされてしまいます。。。

引用:
If文でリストから出てきたものをクリックする場合と、そうでない場合と分けることは可能なのでしょうか？
オートコンプリートを選択するときのEnter押下とそうでない時ですか？
それは無理じゃないかと思います。

まゆりんさんの言うようにオートコンプリートを無効とするか、
引用:
ただ、JavaScriptを使わず普通にSubmitButtonとTextBoxを作って試してみたら
オートコンプリートでEnterキーを押してもSubmitはかかりませんでした。
だそうなので、
引用:
画面上どこをマウスでクリックしたあと、Enterを押すと特定の画面へ移動する不具合があったため、Enterを使えなくなるように、全てのTexやFormに
onkeydown="return chkEnter();"
と書き加えました。
の不具合を修正しchkEnterとかのスクリプトは全部外して、
ブラウザのデフォルト動作に任せるのが一番すっきりするようですね。
まゆりん
ぬし
会議室デビュー日: 2002/08/12
投稿数: 539
お住まい・勤務地: よこはま
投稿日時: 2003-09-19 11:23
引用:

オートコンプリートは作成者側で決められるんですね。勉強になりました。

オートコンプリートの有無はクライアント側のブラウザでも可能です。
インターネットオプションのコンテンツタブから設定できます。
＃しかし、この方法だと個々で設定しなければならず
＃全てのクライアントにその設定をする羽目になるのでお勧めできません。
＃予備知識として覚えておくと良いです。
＃ちなみにオートコンプリートはIE5から搭載されていた機能です。確か。

で、あまりスッキリしない方法ですが
TextBoxのみonkeydownイベントを外し、その他のコントロールはonkeydownイベントで
Submitを掛けないように制御してしまうのはどうでしょうか？
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2003-09-19 12:17
こんにちは。

　全然解決策にならないですが。。。

「WindowsアプリケーションとWebアプリケーションは違うんだ。もしここで、Windowsアプリケーションのように作ったとして、それでは他のサイトで同じような画面が出たとき、そのページに対してもWindowsアプリケーションのように動作することを求めますか」

みたいなことは言えないのでしょうか（言えないから質問になるのでしょうが）。きっと困ると思うんですよね。「あっちのページはEnterキーでフォーカスが移動したのに、ここでは『送信』ボタンが押されてしまう（っていうか、それが普通でしょ）」って。使う人の、本当の利便性を考えると、Windowsの作法ではなく、Webの作法に合わせる方がよいと思うんですよね。


　いや、私も入力や選択によるテキストボックスの入力可否を制御するように言われているんですけどね。100Baseだからできることですよって前置きして、作っているんですけどねぇ。。。
たけくん
ベテラン
会議室デビュー日: 2003/08/19
投稿数: 63
投稿日時: 2003-09-19 13:13
引用----------------------------------------------------------
TextBoxのみonkeydownイベントを外し、その他のコントロールはonkeydownイベントで
Submitを掛けないように制御してしまうのはどうでしょうか？
　　----------------------------------------------------------
まゆりんさんのいわれる通り、この方法も考えたのですが、問題点として画面のどこをクリックしてEnterを押下しても特定のボタンが押されてしまうという現象があるので、formでonkeydownと書いています。なので、TextBoxでonkeydownを除いても、formにonkeydownイベントを書いてあるので、うまくいきません。

で、ぴでさんの言われる通り、不具合を修正しようと思うのですが、次のことでが問題になります。
先ず簡単に画面をHTMLで表すと
------------------------------------------------------------------------------
<%@ Register TagPrefix="key" TagName="Menu" Src="../Controls/Menu.ascx" %>
<body>
　<form runat="server">
<table>
<tr>
<table>
<key:menu id="Menu" runat="server"></key:menu>
(ページ移動を行うためのテンプレートが貼り付けてあると考えてください
　　　テンプレートは.ascxで作ってあります。（画面移動用に作成してあります）
</table>
</tr>
<tr>
　<div>
ここに画面を書いてあります
</div>
</tr>
</table>
<form>
</body>
------------------------------------------------------------------------------
このようになっています。
<form>で全体を囲ってあるので、画面のどこでもマウスクリックしてEnterを押下すると、テンプレートのImageButtonがクリックされます。
なので、ひとつしかない<form>を二つにして、テンプレートを囲う部分と、画面を書くところと二つ<form>を用意してもいいのですが、runat="server"はひとつの画面に一つしかかけないのでエラーが出てしまいます。
なので<form>を分けるというのは難しそうです。

で、なぜEnterキー押下でテンプレートのButtonがSubmitされるのかも不思議なところなのですが、どこから解明していけばいいのか難しいところです。
«前のページへ 1|2|3 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）