JavaScript + Ajax 実践サンプル集 - すかし文字を表示する

すかし文字を表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのWatermark()プラグインを利用してテキストボックスに「ヘルプ情報」を表示します。テキストボックスがフォーカスを取得すると「ヘルプ情報」が消えます。テキストボックスにデータを入力すると「ヘルプ情報」が消えます。何も入力しないときは「ヘルプ情報」を表示します。

このサンプルを編集して試してみる

$("#first").Watermark("First");
$("#mi").Watermark("MI");
$("#last").Watermark("Last");
$("#suffix").Watermark("Suffix");
or 
$("#suffix").Watermark("Suffix", "#369");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Watermark </title>
  <link href="jQuery/watermark/prettify.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>

$(function() {

$("#first").Watermark("First");
      $("#mi").Watermark("MI");
      $("#last").Watermark("Last");
      $("#suffix").Watermark("Suffix");

$("#clearAll").click(function() {
        $.Watermark.HideAll();
      });
      $("#showAll").click(function() {
        $.Watermark.ShowAll();
      });

$("pre, code").addClass('prettyprint');
   
    });
  </script>

</head>
<body>

<pre>
$(function(){
   $("#first").Watermark("First");
   $("#mi").Watermark("MI");
   $("#last").Watermark("Last");
   $("#suffix").Watermark("Suffix");
});
</pre>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

すかし文字を表示する

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

すかし文字を表示する

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!