jQuery フォームにテキストをうっすらと出すプラグイン
- Category ：
- Javascript
フォームなどのテキストを入力する所に予め何を記入したら良いのかを記述してあるとユーザービリティ上凄く良いと思います。
そんな時に使えるのが今回紹介します「jQuery Watermark Plugin」です。
…ここからが続き
Watermark ダウンロード先、使い方
head内
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="js/jquery.updnWatermark.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$.updnWatermark.attachAll();
});
</script>
XHTML
<form action="#"> <h3>post your comment</h3> <dl id="commentForm"> <dt><label for="author">name</label></dt> <dd><input type="text" id="author" name="author" title="name (required)" /></dd> <dt><label for="email">mail address</label></dt> <dd><input type="text" id="email" name="email" value="" title="mail address (required)" /></dd> <dt><label for="url">URL</label></dt> <dd><input type="text" id="url" name="url" title="url" /></dd> <dt><label for="text">comment※</label></dt> <dd><textarea id="text" name="text" title="message"></textarea></dd> </dl> </form>
inputやtextareaにtitleに記述している部分が表示されます。
CSS
.updnWatermark {
color: #999;
padding: 2px;
}
デモページではこの用に指定しております。この部分は好きに指定して貰って大丈夫です。
Comments
はじめまして。
こちらのデザインフォームを使わせて頂こうと思ったのですが、MTもjQueryも初心者ですので、どこを触れば良いのかわからずに悩んでいます。
宜しければ、ご教授を頂ければ幸いです。
最初だけなるのは先ほど書いた用に高さの計測でバグって可能性がありそうですね…
一度その他の js をきってみたり、フォームで使っているソースのみしたりして、原因の箇所を探していくしかないと思います…
返信ありがとうございます。
はみ出るのは、下へ15pxほどです。
margin-top:-15px;
でずらしてみたのですが、クリック後正しく表示されていたのも上へずれてしまいます。
クリック後は正しく表示されるので、なぜ最初だけ･･･と思うのですが。
お忙しいところ申し訳ありませんが、よろしくお願いします。
renaさん。
文字がはみ出るとは、右にはみ出してしまうって事でしょうか？
それとも上下とかでずれてしまう感じなんでしょうか？
他の js や position などを使っている箇所で高さの計測で誤差が出ているような気がしますが…
それ以上はこれだけでは何とも言えないですね＞＜
こんばんは、はじめまして。
今回、このデザインのフォームを仕事で使わせて頂こうと考えています。
しかし、Firefixで見ると文字列がはみでてしまいます。ただし、一度該当のフォームをクリックした後、別の場所をクリックすると、正しい位置に表示されます。
色々確認してみたのですが、解決策がわかりません。ご存知でしたら、ご教授よろしくお願いいたします。