クラス名で動く「残り文字数」カウントを作ろう

簡単に実装できる「クラスで動くJQueryカウント」を作ろう。
js_count_200、js_count_1000などのクラス名の数値で文字数を制限しながらカウントする
様に作ってみました。

まずはhtmlから

<textarea class=”js_count_100″></textarea>
<p>残り文字数<span></span></p>

javascript(jqueryライブラリを使用しています)

$(function() {
//キーボードやマウス操作でイベントが発生します。
$(“[class *= ‘js_count_’]”).on(‘keydown keyup change’, function() {
//match関数を使ってクラス名から数値だけ拾って変数iとします。
var i = $(this).prop(‘className’).match(/[0-9]+/);
//iを残り文字数の初期値として見せるために<span>にセットします
$(“span”).text(i);
//textarea内に入力された文字を.val()で取得して.lengthで数えて変数textnumに入れておく
var textnum = $(this).val().length;
//現在残り文字数を取得する
var maxnum = (i) – textnum;
//一部ブラウザーでtextareaはmaxlenghが効かないのでiより長い文字はカットします。
var val = $(this).val().slice(0,i);
if (maxnum<1){
maxnum=0;
$(this).val(val);
}
//入力があるたびに残り文字数をセット
$(“span”).text(maxnum);
//最後に.change()を付けることで入力がなくても最初からイベントを発生させることができます。
}).change();
});

まずはコピペで試してみてください。
それでは次の更新をお楽しみに!

 

キリン

キリン について

主にフロントエンドを担当している者です。 韓国光州生まれ。 バイクと自転車が好きでペンネームは東本先生の代表作にしました。

コメントを残す

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