当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。

テクてく Lotus 技術者 Slack に参加しよう!

2014年6月3日火曜日

XPagesでEnterキーを押したときに実行するようにしたい

今回で450本目の記事です。
ブログを始めて、6年と2か月なので、1か月あたり6本の執筆?です。
最近の頻度からすると、多めですね。始めた当初は、ほぼ毎日更新していたので、そのためにこんな数字になっているのでしょう。

閑話休題。今日も始まる前にボタンをクリックしましょう。
にほんブログ村 IT技術ブログへ


では、今日の話題です。
Webサイトで、入力ボックスだけあって、そこに値を入力して、Enterキーを押すと、内容に従って処理が実行されるものがあります。
検索なんかがそうですね。

あれをXPagesでも実装できたら格好いいですよね。
ということで、それをやってみましょう。


用意するコントロールは、編集ボックスとボタンです。

まずはボタンの説明をしましょう。
ボタンの名前は後で必要になるので、覚えておきます。
ここでは、btnSearch としておきます。
ボタンには、普通に処理させたい内容を記述します(onClick イベントに記述)。
そのボタンのスタイルを
display:none
とします。
これはUIでは設定することができないので、プロパティビューの「すべてのプロパティ」を開いて、
そこの「style」という項目に直接記述します。
非表示にするというスタイル指定ですが、「可視」のチェックを外すのとは意味が違い、「可視」のチェックを外してしまうと、動かなくなってしまうので、要注意です。
ボタンのスタイルを設定

次に編集ボックスの説明です。
こちらのクライアントサイドJavaScriptを記述することで実行できるようになります。
 イベントビューを開いて、イベント種類は「onkeypress」を選択して、クライアントサイドを選択します。
以下の内容を記述します。
if ( thisEvent.keyCode == 13 ) {
    var element = document.getElementById( "#{id:btnSearch}" );
    element.click();
}
ここで、重要なのは#{id:btnSearch}です。
このbtnSearchは最初に作成したボタンの名前です。

ちなみに、
thisEvent.keyCode == 13
というのがブラウザでのEnterキー を表します。

つまり、Enterキーが押されたら、btnSearch ボタンをクリックしてください。
という命令になります。
これで、btnSearch ボタンのonClickイベントが発動します。


出来上がりは下図のような形になります。

編集ボックスのイベント

実装はこれで終了です。

※onkeypressは、ブラウザごとに挙動が違うということらしく、このままでは動かない可能性もあります。
イベント挙動を考慮することについては、私の知り合いのめそ凹すね丸さん【JavaScript】クロスブラウザでEnterを検知するにはにて、解説を書いていただいていますので、そちらを読んでいただけると、より理解が深まると思います。(2014年6月5日追記)


いかがでしょうか?思ったよりも簡単でしょう?

これに、XPagesでplaceholderを実現してみる で説明したplaceholderを設定してみると、検索ボックスみたいで雰囲気が出るでしょう。


いざ動かしてみると、ちょっとした感動を味わえますよ(あくまで個人の感想です)。
簡単なので、試してみてください。


では、今日はこの辺で・・・



Web化するならXPages!










【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ




0 件のコメント: