プレースホルダーの表示

a-blog cmsでは、フォームのテキスト入力エリア内にあらかじめ任意の文字を表示しておくプレースホルダーの機能(placeholder)の設定が標準で実装されています。

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJS」を参照してください。

//-------------
// placeholder
placeholderMark   : '.js-placeholder',
placeholderColor  : 'silver',
placeholderMarkここで指定したセレクタがプレースホルダーになります。
placeholderColorプレースホルダーの文字色です。色のキーワードやRGB値(#FF0000, rgb(255,0,0),rgb(100%,0%,0%))で指定できます。

2. HTMLとCSSの編集

指定したクラスをHTMLのinput要素もしくはtextarea要素に記述します。プレースホルダーとして表示する文字列は、title属性に記述します。

例)placeholderMarkで「.js-placeholder」と指定した場合

<form action="" method="post" name="searchForm"><input type="text" name="keyword" value="%{KEYWORD}" size="15" class="js-placeholder" title="キーワードを入力" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
<input type="hidden" name="tpl" value="/search.html" />
<input type="hidden" name="bid" value="%{BID}" />
</form>

サンプル

以下のようにフォームのテキストエリアに任意の文字が表示されます。