文字数制限を付けたフォームに入力された文字を
常に表示させる方法についてざっとご紹介。
完成形
1000字まで入力可能な入力欄にて、
「 0/1000」 の「0」が入力毎に変わる。
html側のでは、text_fieldに「maxlength:"1000"」を追加して
文字数制限をかけています。
値をカウントして書き換える
sample.js
$(function(){
$('.「text_fieldのクラス名」').keyup(function(){
var count = $(this).val().length; //文字数を変数[count]に代入する
$('.「文字数を表示する要素のクラス名」').text(count + "/1000"); //
});
})
keyupイベント は、キーボードのボタン押下後、離されたときに発生します。
text()メソッド で、htmlのテキスト(0/1000の要素)の書き換えを行います。
◉ text()メソッドは他にも、テキスト情報を取得・追加・変更することが可能。
以上で終了です。
ご覧いただきありがとうございました。