プレースホルダー

現在は各ブラウザでplaceholder属性が実装されているため、HTMLのplaceholder属性の使用を推奨しております

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

デモ

<input type="text" name="iebug" value="" style="display:none;" class="iebug" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
<input type="hidden" name="tpl" value="/search.html" />
<input type="hidden" name="bid" value="%{BID}" />

デフォルトの設定

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

//-------------
// placeholder
placeholderMark   : '.js-placeholder',
placeholderColor  : 'silver',


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

使い方

HTML

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

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

<form action="" method="post" name="searchForm">
  <input type="text" name="keyword" value="" size="15" class="js-placeholder" title="キーワードを入力" />
  <input type="text" name="iebug" value="" style="display:none;" class="iebug" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
  <input type="hidden" name="tpl" value="/search.html" />
  <input type="hidden" name="bid" value="6" />
</form>