タイトル長くてすみません。
やりたかったこと
以前、表示例を入力フォーム内に表示させるjQueryプラグイン「ah-placeholder」を紹介しました。placeholder属性に対応していないIE9以下でも、placeholderに記述すれば入力例が表示される、便利なプラグインでした。
参考
フォーム内に入力例を表示させるには、どの方法がいいの？
しかし、いざ実装すると問題が発覚しました。
それは、エントリーフォームによくある「郵便番号から住所を自動入力する」「フリガナを自動入力する」という機能と組み合わせると、 入力例が灰色のまま残ってしまう という現象です。
解決方法
はじめに、こんなスクリプトを書いておきます。
このファンクションを、onblur または onfocus で使います。
id は適宜変更してください。
<script>
function add_change(){
document.getElementById('address').style.color="#000000";
}
function kana_change(){
document.getElementById('kana').style.color="#000000";
}
</script>
onblur
とある入力フォームからカーソルが外れた時点で、該当する文字列の文字色を、IDで指定して変えるという方法。郵便番号から住所の自動入力をする時に使います。
<input id="zip" type="text" name="zip" value="" onblur="add_change()" placeholder="ex) 439-0005">
<input id="address" type="text" name="address" value="" placeholder="ex) Shibuya">
onfocus
onbluerの逆で、そのフォームにカーソルが置かれた時点で、文字色を変えるという方法。名前からフリガナを自動入力するときに使います。
<input id="kanji" type="text" name="kanji" value="" onfocus="kana_change()" placeholder="ex) 山田">
<input id="kana" type="text" name="kana" value="" placeholder="ex) やまだ">
まとめ
自動入力に使っているスクリプトによって、対処方法が変わってくるかもしれません。
なんか無理矢理な感じなので、もっとスマートなやり方はないのかな。
無理してplaceholder 指定しなくても、欄外に入力例を書けばいいじゃん、という指摘もありますが、そうもゆかないのですよ。