- PR -

JSF Enter キー無効化の方法

1|2 次のページへ»
投稿者投稿内容
小僧
大ベテラン
会議室デビュー日: 2005/06/24
投稿数: 122
投稿日時: 2007-09-26 11:21
お世話になります。
また皆様のお知恵を拝借したく思います。

【環境】
OS:Windows 2000
Web サーバ:Tomcat 5.0
JDK:1.4
JSF:1.1

【前提】
Web画面の左上に共通の画像を表示し、ここの画像が押下されたら「ログオフ」処理を行う。

【やりたいこと】
画面上、入力域で「Enter」を押下した場合、自動的に左上の画像を押下してしまうので、
この処理を制御したい。
当然ながら、クリックした場合は「ログオフ」処理が動くようにしたい。

【やったこと】
form の onsubmit にて event.keyCode をチェックしようと思ったのですが、
対象のボタンが画像のため、上手くイベントが拾えない感じです。
( event.keyCode の値が 0 になってしまいます )
( form onkyedown にて拾ってみたら 13 が返ってきたのでコードミスではないと思います )

具体的には
コード:
<h:form id="imgform" onkeydown="doKeydown()"  onclick="doClick()" onsubmit="return logoff()" >
	<t:panelGrid columns="3" columnClasses="a,b,c">
		<t:panelGroup colspan="1">
			<t:commandButton id="img1" immediate="true"  image="../gazou.JPG" action="#{sessionClearBean.logout}" />
		</t:panelGroup>

のような感じのコードです。(大分はしょっています )

次に、「onkeydown にて改行の場合、全て無視」という処理を行ったのですが、
これだと TEXTAREA の改行も無効化されてしまいます。

通常のWeb画面だとJavaScriptで頑張ればなんとかなりそうな
気もするのですが、今回は JSF のため、JavaScriptにて表現出来ることに
制約があると思っています。
( 実際、普通の作り方の対応方法はいくつか見つけました )

個人的には、左上の画像を「ボタン」にすれば、上手く onsubmit が取れるのかな、と
思っていますが、ボタンだと殺風景なので画像を表示させたいと思っています。

JSF を用いた、Enter の制御方法について、皆様のお知恵を拝借できればと思います。
実際の画面イメージがないため、伝わり難いかもしれませんが、
宜しくお願い致します。
暁
大ベテラン
会議室デビュー日: 2006/06/28
投稿数: 116
投稿日時: 2007-09-27 00:19
イメージボタンから別の所にフォーカスを移すという方法では解決しないでしょうか？
Anthyhime
ぬし
会議室デビュー日: 2002/09/10
投稿数: 437
投稿日時: 2007-09-27 09:24
commandButtonではなくcommandLinkにし、display:blockでブロック要素に変更後、スタイルシートで背景画像を設定してやればいいと思います。
小僧
大ベテラン
会議室デビュー日: 2005/06/24
投稿数: 122
投稿日時: 2007-09-27 13:51
お世話になります。
返信ありがとうございます。

> 暁サマ
> イメージボタンから別の所にフォーカスを移すという方法では解決しないでしょうか？
具体的に「フォーカスを移す」ロジックはどうすればよいのでしょうか？
Enter 時のイベントを拾う、という方法ですか？
JSF と JavaScript の親和性はあまりよくないと
認識していますので、その実現方法が思いつきません。

> Anthyhimeサマ
> commandButtonではなくcommandLinkにし
実際のトリガーと画像を別に管理する、という方法ですよね？
Link の value にスペースが指定できなかったり ( つまり何か文字列を設定しないとダメ )、
画像の大きさとマッチしなかったりで、今回のケースですと
現実的な対応ではありませんでした。

宜しくお願い致します。
朝日奈ありす
大ベテラン
会議室デビュー日: 2007/05/02
投稿数: 189
お住まい・勤務地: 最北の地
投稿日時: 2007-09-27 23:10
引用:

次に、「onkeydown にて改行の場合、全て無視」という処理を行ったのですが、
これだと TEXTAREA の改行も無効化されてしまいます。


といってますが。

フォーカスされたらフラグを立てる処理。
フォーカスが外れたらフラグを倒す処理。
フラグがたっていなければ改行を全無視する。

という構造を作れば問題ないのでは？

ひとつのイベントでどうにかしようとせず。幅広い視野で見ることをお勧めします。
私の場合、業務でわからんことがあっても掲示板には投げ（れ）ませんが・・・
小僧
大ベテラン
会議室デビュー日: 2005/06/24
投稿数: 122
投稿日時: 2007-09-28 09:03
返信ありがとうございます。

> フォーカスされたらフラグを立てる処理。
> フォーカスが外れたらフラグを倒す処理。
具体的にどのように実現するのでしょうか？
上にも書きましたが、JSF と JavaScript の親和性が良くないので、
イベントを拾うのにも一苦労です。

かつ、全ての画面の入力項目全部にそんな埋め込み処理を入れるなんて、
なんか費用対効果の面から言って・・・
とか思ってしまいます。
( まぁ、それで「Enter 無効化が出来るのであれば安い」と思う人が
いるかもしれませんが。。。私は思いませんけど！ )

個人的には form の位置を工夫する、とか submit イベントの時のみ
上手く対応出来る、みたいな解決方法がないかな、と思っています。
( 実際、onsubmit って良い線だと思ったんですけどね。。。 )

宜しくお願い致します。
Anthyhime
ぬし
会議室デビュー日: 2002/09/10
投稿数: 437
投稿日時: 2007-09-28 09:13
引用:

> Anthyhimeサマ
> commandButtonではなくcommandLinkにし
実際のトリガーと画像を別に管理する、という方法ですよね？
Link の value にスペースが指定できなかったり ( つまり何か文字列を設定しないとダメ )、
画像の大きさとマッチしなかったりで、今回のケースですと
現実的な対応ではありませんでした。

んなこたないですよ。
<h:commandLink value="" style="display:block;width:100px;height:100px;background-image:url('image.png')"/>
こんな感じで任意の大きさの画像のリンクを作れます。
小僧
大ベテラン
会議室デビュー日: 2005/06/24
投稿数: 122
投稿日時: 2007-09-28 10:03
返信ありがとうございます。

Anthyhime サマ
> んなこたないですよ。
仰る通りです。
ご提示頂いた内容で出来ました。

これでまた一つ心配事が減りました。
ありがとうございました。
1|2 次のページへ»

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