テキストボックスにあらかじめうっすら文字を入れておく

2012/1/5 プログラミング

テキストボックスにあらかじめ薄い文字を入れておく

テキストボックスにうっすらテキストが入力されているあれです。

HTML5の場合

placeholder属性でうっすらテキストを指定するだけです。

<form action="#" method="post">
<input name="name" type="text" value="" placeholder="名前を入力してください" />
<input type="submit" value="送信" />
</form>

とてもカンタンなのですが、IEはまだ対応してないですね。。

HTML5 & CSS3 Support

jQueryを使う場合

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-formtips.googlecode.com/files/jquery.formtips.1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('form input.help, form textarea.help').formtips({
        tippedClass: 'tipped'
    });
});
</script>
<style type="text/css" media="screen">
.tipped {
color: #BBB;
}
</style>
<form action="#" method="post">
<input name="name" type="text" value="" class="help" title="名前を入力してください" />
<input type="submit" value="送信" />
</form>

jQueryを使う場合の注意点

jQueryを使う場合、フォームに入力しないで送信すると、

うっすらテキストがそのまま送信されてしまうようです。

対策として、下記のようなスクリプトで

送信するときに、valueとtitleの値が同じ場合はvalueの値をクリアするようにしました。

ん～、他によい方法があれば教えてください。

<form action="#" method="post">
<input name="name" type="text" value="" class="help" title="名前を入力してください" />
<input type="button" value="送信" onclick="send(this)"/>
</form>
<script>
function send(btn)
{
    if($('input[name="name"]').attr('value') == $('input[name="name"]').attr('title'))
    {
       $('input[name="name"]').attr('value', '') == "";
    }
    btn.form.submit();//送信
}
</script>