社員ブログ
HOME  社員ブログ

アーカイブ

‘jQuery’ カテゴリ

jQuery フォームに入力例を表示するプラグインで不具合?

2011年04月18日 17時41分59秒

こんにちは、コブラです。


先日ご紹介した、フォームに入力例を表示するプラグインで不具合が見つかりました。

対象バージョンは1.2.4です。


不具合の詳細は、

例文を表示していない他のinput type=”text”の中でENTERキーを押すと、

例文表示が消えてしまうというもの。(入力文字の確定は除外)


関係ないtextからもjsが呼ばれているから?submitが二回呼ばれてるから?

と色々考えましたが、

バージョンを1.2のものに戻したら直りました。

気になったので1.2.4とソースを差分比較してみましたが

変更点が多すぎて断念・・・orz


同じ悩みにぶち当たった人は1.2にしてみてください。

jQuery, 社員:cobra

jQuery フォームに入力例を表示するプラグイン

2011年04月8日 13時24分39秒

こんにちは、コブラです。


問い合わせフォームや会員登録フォームなどの入力画面で、

入力例を分かりやすく表示できるプラグインのご紹介です。

それがこの「jQuery Form Tips


使い方は簡単です。

1.jQuery Form Tipsからjquery.formtips.jsをダウンロードし、

   jQueryからjquery.jsをダウンロードします。

     ※現時点でjQuery Form Tipsの最新は1.4.1でした


2.両者をアップロードし、読み込みます。

<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript" src="jquery.formtips.js"></script>


3.表示用のJavaScript処理も記述します。

<script type="text/javascript">
  $(document).ready(function() {
    $('form.help').formtips({ 
      class_name: 'tipped'
    });
  });
</script>


4.フォームを作成します。(本来はinputタグ中などに改行しません)

<form> 
  <input type="text" name="text1" id="text1" size="20"
 value="" title="ここに表示されます" class="help" />
 
  <textarea name="tarea" id="tarea" cols="40" rows="10"
 title="入力例です" class="help" ></textarea>
</form> 


5.このままだと入力文字と区別つかないのでCSSで文字色変更

<style type="text/css" media="screen">
.tipped {color: #CCCCCC;}
</style>


スタイリッシュな入力フォームが出来上がりました!

JavaScript, jQuery, 社員:cobra

入力可能な残り文字数をカウントしてくれるjQueryのプラグイン

2010年04月11日 18時29分24秒

こんばんは、日曜日にコブラです。

今回はjQueryの便利プラグインのご紹介。


Twitterのように残り文字数をカウントしてくれるjQueryのプラグイン

テキストエリアやテキストフィールドに使える便利なプラグインです。


Twitter風に残り文字数をカウントしてくれるjQuerynoプラグインsample

指定文字数に近付くと色が変わり、

オーバーすると赤文字で教えてくれます。

改行も1文字としてカウントされてますよ。

便利ですね!早速使おう!

JavaScript, jQuery, 社員:cobra ,