HTML5ではinputや、textareaにplaceholder属性が追加されました。この属性に値を設定すると入力欄の中に、入力例(ヒント)を表示することができます。入力欄に入力例を表示することで、ユーザーがどのような内容を入力すべきかを明示的に伝えることができます。また、placeholderで表示されている文字は入力欄に文字を入力すると消えるためユーザーの入力の妨げになることはありません。今回のTipsではplaceholder属性についてご紹介します。
placeholder属性について
HTML5で追加されたplaceholder属性を使用すると、入力欄やテキストエリアに入力例(ヒント)を表示することができます。
SmartPad4i(Cobos4i)アプリケーションでは、インターフェース部分をHTMLで作成するため、placeholder属性も、もちろん使用することができます。
上記のように入力欄に、ヒントの文字を表示できます。
また、入力を開始するとヒントは非表示となるため、ユーザーの操作を妨げることはありません。
(HTML例)
<input class="input" type="text" id="JMCOD" placeholder="例:AA1234">CSS placeholder疑似要素
placeholder属性で表示する文字は、cssで表示のカスタマイズを行うことができます。
議事要素「::placeholder」を使用することで描画設定をカスタマイズすることが可能です。
(CSS例)
input.input::placeholder {
color: #FF0000;
}
placeholder属性は、HTMLを少し改変するだけで適用することができるため、SmartPad4iや(Cobos4i)で作成済みのアプリケーションでもRPGのコンパイルや再配布なしで表示可能ですので是非ご活用ください。