jQuery フォームにテキストをうっすらと出すプラグイン

jQuery フォームにテキストうっすらと出すプラグイン

フォームなどのテキストを入力する所に予め何を記入したら良いのかを記述してあるとユーザービリティ上凄く良いと思います。

そんな時に使えるのが今回紹介します「jQuery Watermark Plugin」です。

demo page

…ここからが続き

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;
}

デモページではこの用に指定しております。この部分は好きに指定して貰って大丈夫です。

demo page

Comments

nori

nori

はじめまして。
こちらのデザインフォームを使わせて頂こうと思ったのですが、MTもjQueryも初心者ですので、どこを触れば良いのかわからずに悩んでいます。

宜しければ、ご教授を頂ければ幸いです。

2011年06月15日 01:20

MIYA

MIYA

最初だけなるのは先ほど書いた用に高さの計測でバグって可能性がありそうですね…

一度その他の js をきってみたり、フォームで使っているソースのみしたりして、原因の箇所を探していくしかないと思います…

2011年03月31日 11:29

rena

rena

返信ありがとうございます。

はみ出るのは、下へ15pxほどです。
margin-top:-15px;
でずらしてみたのですが、クリック後正しく表示されていたのも上へずれてしまいます。

クリック後は正しく表示されるので、なぜ最初だけ・・・と思うのですが。
お忙しいところ申し訳ありませんが、よろしくお願いします。

2011年03月31日 09:36

MIYA

MIYA

renaさん。

文字がはみ出るとは、右にはみ出してしまうって事でしょうか?
それとも上下とかでずれてしまう感じなんでしょうか?

他の js や position などを使っている箇所で高さの計測で誤差が出ているような気がしますが…

それ以上はこれだけでは何とも言えないですね><

2011年03月31日 01:20

rena

rena

こんばんは、はじめまして。
今回、このデザインのフォームを仕事で使わせて頂こうと考えています。

しかし、Firefixで見ると文字列がはみでてしまいます。ただし、一度該当のフォームをクリックした後、別の場所をクリックすると、正しい位置に表示されます。

色々確認してみたのですが、解決策がわかりません。ご存知でしたら、ご教授よろしくお願いいたします。

2011年03月31日 00:59

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article