選択された項目によって、カウントしたい入力文字数を変える

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

よくある文字数のカウントダウン。有名になったのはTwitterかな。140文字以内で入力しないといけなかったので。

で、Javascript+jQueryで単純に考えると、

となりますね。

しかし、今回、select要素によって選択された項目毎に入力文字数が異なる場合です。

例えば以下のようなフォームがあったとします。

inputform

前のプルダウンで選択された項目がAだったら100文字、Bだったら200文字で制限をかけたいという場合。

カウント部分は上のものをある程度流用するとして、選択されたら制限文字数を変えないといけません。
しかも変更しやすくするために、select要素は以下のようにします。

HTML5で使用可能なdata属性を利用して制限文字数をセットしておきます。
そして、そこが変更されたらinput要素に制限文字数をセットしなければならないので、

select属性が変更(change)されたら、選択されているoptionのdata属性から値を取得します。(2行目)
その値を、select要素の次の(next())要素であるinput要素に、属性値「data-limit=”文字数”」としてセットします。
さらに、その次の(next())要素であるstrong要素に「残り○文字」のテキストを流し込みます。(text())

こういう時ってメソッドチェーンって便利ですね。(next().attr().next().text())
長くなりすぎるとわかりづらいので、一度改行していますが。
あと、今回は取得した値で計算などを行わないためparseInt()を省略しています。

これで、input要素にはdata-limit属性が追加されたので、あとはそのdata-limit属性の値を、一番最初の制限文字数としてセットできるようにして、

これでOK!

 

 

とはならず・・・w
上記のようなkeyupイベント等は、DOM要素が作られた時の情報でしか取得出来ません。
そもそもdata-limit属性は、DOMが構築されて、ページがロードされた後で動的にセットされた値になるので、そのような値はchange()やkeyup()イベントでは取得出来ません。
動的な情報も扱えるようにするためには、「on()」メソッドを使用します。

これで項目がいくつあっても、同じように文字数をセットできるはずですね。

厳密にはエラー処理など細かい部分は省略しているので、そのあたりは適宜実装して下さい。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

%d人のブロガーが「いいね」をつけました。