ブログ

2020/04/13
【プリザンター】 第40回)入力項目のポップアップでの補足説明

プレースホルダーの延長

こんにちは、CCS田中です。

第38回ではプレースホルダー(テキストボックスの入力前に薄い灰色などで表示される文字列)の変更方法を説明しました。
このプレースホルダーは、テキストボックスに何を入力するかの説明になるため、一見良さそうに見えるのですが、実際に入力をするときに消えてしまうため、人の記憶を頼りにしている点がよくありません。
そのため、同じ内容をテキストボックスにフォーカスしたときにポップアップで表示する「ツールチップ」という機能を組み込んでみましょう。

方法については次に説明します。

ツールチップを表示するスクリプト

それではスクリプトを作成します。
以下の手順で設定を行ってください。

前回と同様に前提条件として、記録テーブルに項目としてメールアドレスを入力するための項目(種類は「説明A」)を作成しておいてください。
このメールアドレスのテキストボックスのプレースホルダーにも前回と同じように「例:username@sample.com」と表示させるようにし、ツールチップにも同じように表示させるようにします。

1.対象のテーブルを開きます。
2.上記メニューから、[管理]→[テーブルの管理]をクリックします。
3.[スクリプト]タブをクリックします。
4.[新規作成]ボタンをクリックします。
5.タイトルに「プレースホルダー」等を入力します。
6.以下のスクリプトをスクリプト欄に入力します。
7.出力先の「全て」のチェックを外し、「新規作成」、「編集」にのみチェックを入れます。
8.[変更]ボタンをクリックします。
9.[スクリプト]タブに戻り、[更新]ボタンをクリックします。

ここまでで、設定は完了です。
対象テーブルを開き、新規作成をクリックし、メールアドレスのテキストボックスに指定したプレースホルダーが表示されていることが確認きます。

記載するスクリプト


$p.events.on_editor_load = function() {
$('#Results_DescriptionA').attr("placeholder","例:username@sample.com");
$( document ).tooltip();
$('#Results_DescriptionA').attr('title', '例:username@sample.com');
}



1,2行目は前回の内容と同じです。
3行目がツールチップです。
この内容を4行目に記載しています。

まとめ

さて、いかがでしたか?

プレースホルダーの延長ということでツールチップを紹介しました。利用者の立場に立って、使いやすいプリザンターの編集画面を作る場合は必須の機能かと思いますので、ぜひ試してみてください。

導入の支援、スクリプト開発などでお困りの場合は、当社で支援もいたします。

☆☆ブログ内容への質問や追加説明をご希望の方は
【問い合わせフォーム】 こちら からお気軽にお問い合わせください☆☆

PAGE TOP