javascriptによる入力文字数の表示
仕事が忙しくてすっかりおさぼりしてましたが、久々のメモです。
webで入力チェックする前に画面に今入力している文字数を出してほしいという依頼があったので、そのメモです。
※実際には入力チェックはバイトで行っているので、入力バイト数をだすことにしています。
入力中に入力文字を表示するのはいろいろ方法があると思います。
onkeypressを使う方法とか、onpasteを使うとかありますけど、今回はフォーカスが当たっている間だけ、その内容をチェックする方式にしました。
では、実際のソースをメモっておきましょう
<JavaScript側>
var timer; /** * タイマー処理の開始 */ function start(obj,count) { timer = setInterval(countText.bind(this, obj, count), 200); } /** * タイマー処理の終了 */ function stop(obj,count){ clearInterval(timer); // 繰り返し処理を中止する } /** * テキスト文字列をカウント * 全角を2バイト,半角を1バイト、改行は2バイトとする。 * ※今回、お仕事で受けた仕様なので、いろいろ問題はありますが、よしとします。 */ function countText(obj,count) { // バイト数をカウント inputlength = 0; str = escape(obj.value.replace(/\r/g, '').replace(/\n/g, '\r\n')); for (i=0;i<str.length;i++,inputlength++) { if (str.charAt(i) == "%") { if (str.charAt(++i) == "u") { i += 3; inputlength++; } i++; } } // inputlength = encodeURIComponent(obj.value).replace(/%[A-F\d]{2}/g, 'U').replace(/\r/g, '').replace(/\n/g, '\r\n').length; document.getElementById(count).textContent=inputlength; }
<HTML側>
<div id="textCount">0</div> <html:textarea name="helloworld" property="helloWorldTextarea" disabled="disabled" onfocus="javascript:start(this,'textCount')" onblur="javascript:stop(this,'textCount')"> </html:textarea> <% if(!enabled) { %> <html:hidden name="helloworld" property="helloWorldTextarea"></html:hidden> <% } %> <script> countText(document.getElementsByName('helloWorldTextarea')[0],'textCount'); </script>
HTMLがStrutsのJSPになっていますが、肝はonfocusイベントとonblurイベント、とは、下についてscriptタグですかね。
普通に、encodeURIComponetを使う方法も考えたのですが、UTF-8の場合、全角が3バイトになったりするので、今回は1文字づつチェックすることに。
<2018/16/18 補足>
ShiftJISでも3バイトになってしまいました。内部的にUTF-16で持ってるからですかね。
タイマー形式なので、ペーストした場合でも、特に問題なく反応してくれます。
ただ、気になったのが少々重くなることが懸念されるぐらいですかね。
今回は管理画面用ということでしたので、ブラウザも限定されるし、環境もそこまで厳しいものではないということだったので、これで満足!