今回はメールアドレスやパスワードを入力する時のガイド役として
知られるplaceholderの装飾を変更する記事を載せます。
普段は特殊な装飾もしないので深く考えずに実装してしまうことも多いのですが
onsenuiでこのプレースホルダーを::placeholderで定義して擬似要素として使うと
JSX側で定義したplaceholderと::placeholderで定義したplaceholder二つが残像のように
なって表示されてしまうバグが起こりました。
本来ならJSX側で定義したplaceholderが擬似要素::placeholderの要素に
沿って変更されるのですがなぜかそれぞれが独立して表示されてしまう
という理解しがたい現象に見舞われ若干パニックに・・・。
【解決方法】
developツールでdivで囲ったplaceholderを表示している要素を見ると
onsenuiで実装したplaceholderの設定を変えるには::placeholderとは別に
.text-input–material__labelというプロパティを追加する必要があることがわかりました。
なのでこれを以下のようにして追加します。
JSX
</pre>
<div id="sample-page">
<Input float type="email" value={this.state.mailaddress}
onChange={(event) => { this.setState({mailaddress: event.target.value})} }
placeholder='メールアドレス' />
</div>
<pre>CSS
#sample-page .text-input--material__label{
color: #fff;
opacity:0;
}
テキストカラーをテキストボックスの背景と同じ色(白色)にして
目立たなくし、更にopacityを0に設定して透過することで消えたように
見せます。
onsenuiのinputのプロパティの一つであるmodifier=”material”を設定していなくても
.text-input–material__labelの定義が必要になってくるので留めておきたいと思います。
以上になります。
今回はonsenuiでinput要素のplaceholderを定義する際に必要なプロパティが欠けている
ことで起きる不具合について書きました。御清聴ありがとうございました。
