あなたの質問は文字について話しているので、「単語カウンター」とは「文字カウンター」を意味すると思います。
このカウンターの作成には、次の 2 つの部分があります。
UTF-8 文字列のバイト数をカウントする方法が必要です。ありがたいことに、他の誰かがすでにこの質問に答えています:
encodeURIComponent(text).replace(/%[A-F\d]{2}/g, 'U').length
ユーザーが何かを入力するたびに count 関数をトリガーする方法が必要です。keyup
イベントを使用できます。
$('textarea').keyup(function () { ... });
完成した例を次に示します: http://jsfiddle.net/jefferyto/DWwQr/
更新:あなたが探しているのは、ユーザーが入力できる残りの文字数を示すカウントダウンカウンターだと思います。
技術的には、1 文字に入るバイト数を仮定すると、これを計算するのは難しくありません。
(characters left) = Math.floor((255 - (num bytes in string)) / (num bytes in character))
しかし、これはユーザーの観点からは良い考えではありません:
として何を使用しnum bytes in character
ますか?
1 を使用すると、最初はカウンターが 255 になりますが、これは ASCII 文字の場合にのみ当てはまります。ユーザーは 255 文字の漢字を入力できません。
選択した数値は、一部のユーザーにとっては正しくありません。
ユーザーがテキストの入力を開始すると、カウンターはユーザーが期待するように 1 つずつカウントダウンしませんが、理解できないステップで (ユーザーには理解できません) カウントダウンします。
計算に 1 文字あたり 1 バイトを想定すると、ユーザーがテキストを入力する前に、カウンターは 255 を示します。ユーザーが 4 バイト文字を入力すると、カウンターは 251 に変わります。
ユーザーが 1 文字を入力したにもかかわらず、カウンターが別の数だけ減少したことは、ユーザーにとって意味がありません。
TINYTEXT の代わりに VARCHAR を使用することをお勧めします。VARCHAR フィールドの長さは、バイト数ではなく文字数で定義されます。そうすることで、文字数が安定して正確になります。