jQueryからtextareaの文字数制限を簡単に実装【Twitter的な感じ】

textareaでTwitter的な文字数制限を再現したい・・・

そう思ってた時にいいライブラリを発見!

なんとtextareaのハイライト機能もついてたので、
その超便利なライブラリについて使い方とか紹介します。

ライブラリによるtextarea文字数制限の実装手順

1.jQuery本体と必要なライブラリ各種を読み込み

ここで使用させてもらったライブラリがこちら

▼ jQuery Based Text Highlighter For Textarea

このページから「Download」をクリックするとzipでダウンロードできます。それを解凍したらsrcディレクトリから必要なファイルをコピーしてください。

▼ この3つが動かすのに必要

  • trie.js
  • helper.js
  • jquery.textarea-highlighter.js

▼ jQuery本体とともに適当な場所で読み込み

このライブラリはjQuery依存なので当然jQueryをはじめに読み込み。バージョンについては1.11.1以降ならOKみたいです。(少なくとも3.4.0で動作することは確認済み)

2.textareaに対して文字数制限するコード実行

ここでは50字で制限したいと思います。

そのために書いたコードなんかが次の通り

 

1.textarea要素と文字数表示要素を作成

textarea要素には特別なクラスとかいりません。でも文字数制限を表示するために、ここでは class="max-length"  を持つspan要素を作成してます。

 

2.装飾用のCSSを追加

▼ テキトウに文字数超過時のCSSを作成

文字数制限を超えてしまったとき、適用したいクラス名を定義しておきます。ここではシンプルに文字を赤色にするだけのスタイルを適用

 

3.動的にtextareaを初期化する

▼ 文字数制限するコードがこちら

これだけでtextareaの下に文字数がカウントされ、文字数が50文字を超えたら赤色でハイライトされるようになります。

実際のtextareaの見た目・動作はこういう感じ

実際にはこういう見た目・動作になりました。

▼ 動かしてみたときのGif動画

実際にtextareaの文字数制限をした時の様子。Twitter的な文字数制限が数行のコードでできた

まさしくTwiterでよくみる文字数制限です。

かなりそれっぽいものが作れて便利

ちなみにtextareaのハイライト機能もあり

本来はこっちがメインなんですが・・・

実はテキストのハイライト機能もあります。

▼ 例えばこのようなコード例

▼ ハイライト用のCSS追加

▼ こういう感じでハイライトしてくれる

このライブラリには文字をハイライトする機能もある。正規表現も使えるから便利

上コードのようにmatchesオプションに対してハイライトルールを複数渡せます。マッチさせたい正規表現と適用したいクラス名を渡す感じで

例えば 'match': /#[^\s ]+/g  なら#から始まるハッシュタグにマッチし、 'matchClass': 'hightlight-tags'  でそのマッチ対象にそのクラスを適用できるといった使い方ですね。

これも特定単語・URLとかをハイライトするのに便利でした。

もしライブラリがうまく動かない場合は・・・

このライブラリですが、最初上手く動きませんでした。

▼ ハイライト時に変な表示になる

文字数制限に便利なライブラリだがハイライト機能で問題発生。ハイライト箇所が大幅にずれてしまった...

恐らく他ライブラリの影響を受けたと思われます。

この問題ですが、以下CSSの追加で解決できました。

▼ こういったCSSで修正

ただし僕の環境で解決できたという意味です。もしハイライト表示がおかしくなった場合、他ライブラリ・CSSなどに問題がないか調べてみてください。

textareaの文字数制限にもハイライトにも便利だった

今紹介したライブラリ

もちろんtextareaを文字数制限するのにも便利なんですが、正規表現でテキストハイライトしたい時もとても重宝するかもしれません。

もしこういった機能を自力で実装なんてしたら大変ですよね。手を抜けるところはしっかり抜くことが大事だと思ってます。(怠惰とも言えるが・・・)

以上、jQueryによるtextareaの文字数制限でした。ではまた

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください