Java　html:text , html:textarea の入力文字数制限(バイト数)について

現在、既存のWebアプリ改修を行っています。

HTML
1<html:textarea property="riyousya" styleClass="widthauto" rows="1" style="overflow:hidden;" />
2<html:text property="kaisu" styleClass="widthauto" />

上記のようなテキストを入力する箇所がいくつかあるのですが、

現仕様
JavaScriptを使用して、各入力エリア上部に現在何文字何行入力されているか表示(文字はバイト数)
(例)200文字/10行
Formにて保持している最大文字数or最大行数を超えているとカウント文字が赤くなり、許容文字・行数を超えていることを知らせる。

要望
別のWebページでも入力文字のカウントを入れようか、という話になったのですが
ある特定のページにおいて入力項目が30～40ある為、一つ一つ文字数表示を入れると
ただでさえ見づらいページが余計に見づらくなってしまうので、最大文字数を超えた場合に入力出来ないようにすることは可能か。
(例)最大バイト数:10 既入力値:「あああああ」の場合、追加入力しようとしても入力が受け付けられず、「あああああ」から変わらないようにする(BackSpace等の削除は有効にしたい)

上記要望を満たすため、わからないなりに調べたのですが
maxlength="XXX" では半角全角関係なく5文字までしか入力出来ない
onChange、onKeyPressイベントなどでは入力された後に判定する為要望と異なってしまう
と、解決に至れていない状況です。

上記要望を満たすことは可能なのでしょうか。
皆様のお知恵を拝借できますと幸いです。

【2016/10/28 17:20追記】
バイト数はMS932基準になります。

【2016/10/31 09:15追記】
使用するブラウザはIE11になります。

KSwordOfHaste

2016/10/28 08:10

どのようなエンコーディングにおけるバイト数か明確に述べるべきと思います。例えばMS932で変換した結果のバイト数とか・・・

Alice0225

2016/10/28 08:21

>>KSwordOfHasteさん　追記させていただきました。

行動規範の内容に同意します

回答2件

制限以上のバイト数となるような文字入力を無視

Javaであれば可能ですが、HTMLでのTEXTやTEXTAREAで「キーがコントロール上に反映されるまえにハンドリングすることで入力文字を無視すること」は不可能に思えるので、次善策としてキー入力があるたびにもし制限を超えた長さになっていたら文字列の最後尾を切り捨てるといった仕様にすれば可能だと思います。keydownイベントはブラウザにより動作の違いがあるようなので半角・全角・IMEによる入力の全てでイベントが発生するブラウザが前提になると思います。スミマセンが前提のブラウザがどういうものになるかは詳しくないのでコメントできません。

MS932のバイト数

検索するとMS932で変換するライブラリーがあるようです。下記のサイトにリンク先がありました・・・
javascriptで文字コード変換

投稿2016/10/28 09:09

KSwordOfHaste

総合スコア18394

Alice0225

2016/11/02 03:16

ご回答ありがとうございます。 keydown,keyupイベントによる、「入力後に文字数が最大数を超えていた場合に超えた分を削除」という方法は私自身も提案として実装したのですが、「それだとダメ」と言われてしまいました。。。バイト数算出は既に実装されているので大丈夫そうです。

KSwordOfHaste

2016/11/02 07:00

むー。入力自体を阻止せよということですか。TEXT一つ一つに対して直前の値をJavaScriptデータとして覚えておき、TEXTの内容が変化した際に制限長を超えていたら元の値に戻すとやればできるのでしょうが・・・他によい方法があるのでしょうか。上のように実現したとすると字数オーバー時に入力中のカーソルの位置が先頭に戻ってしまうのでコントロールの一般的な振る舞いから考えて不自然な動きになってしまいます。そのあたりが許容できるならこの手もあるかもしれません。そのあたりユーザさんによく理解していただいた上で動作を考えないと後で苦労しそう・・・個人的には制限を超えていたら背景色を変更しsubmitボタンを無効化といった方が自然に感じます。それはそれで実装が面倒そうですが・・・

行動規範の内容に同意します

ベストアンサー

Blobオブジェクトが使える環境に限定できるなら
new Blob([str]).sizeを参照すればよさそうです。
またonChange、onKeyPressとのことですが
最近のモダンブラウザならonInputイベントが使えます

#sample

HTML
1<script>
2document.addEventListener('input',function(e){
3  if(e.target.nodeName=="TEXTAREA"){
4    var v=e.target.value;
5    var b=new Blob([v]);
6    console.log(b.size)
7    }
8});
9</script>
10<textarea>
11</textarea>
12

#sample2
細かい条件設定が面倒なのでjQueryでやった場合の最大10バイトまで入力可能なtextareaです
ただしUTF8でやると１文字＝3バイトなので「あああああ」ではなく「あああ」で切れてしまいます

HTML
1<script>
2$(function(){
3  var maxbytes=10;
4  $('textarea')
5    .on('input',function(e){
6      if(new Blob([$(this).val()]).size<=maxbytes){
7        $(this).data('val',$(this).val());
8      }else{
9        $(this).val($(this).data('val'));
10      }
11    });
12});
13</script>
14<textarea>
15</textarea>
16