textareaにoninputイベントで値を設定した時に、
文字が異常入力されてしまいます。
何かこの現象について、知見のある方はいらっしゃいますか。
<やりたいこと>
入力文字数制限をしたい
(例では単純な10文字制限をしておりますが、実際はバイト数制限です)
<実現方法>
javascriptのoninputを用い、指定文字数以上が入力されたときに、指定文字数だけ切りとった文字列を画面に表示する
<発生する現象>
全角文字を未確定のまま2文字以上入力すると、下記のようになる
「あ」→「あ」(不具合なし ・・・全角ローマ字入力でaと入力
「あい」→「あいあい」 ・・・全角ローマ字入力でaiと入力
「さs」→「さsさs」 ・・・全角ローマ字入力でsasと入力
「ささ」→「さsささささ」 ・・・全角ローマ字入力でsasaと入力
※いずれも全角ローマ字入力で、途中エンターで確定せずに一度に入力した場合
<詳細>
・2文字目以降を入力した時に、oninputイベントが2回連続で発生する
1回目のoninputイベントによるvalのセットで、2回目が呼び出される??
・ininputをkeyupにしても同様の事象が発生する
・textareaでのみ発生。通常のinputでは発生しない
・IE11はmaxlength属性に不具合があり、この影響を受けている可能性もある。(これもwin10では発生しない)
<発生したブラウザとOS>
IE11
Windows7,8.1
※Windows10では発生せず。またOS問わずchromeでは発生せず。
<ソース>
こちらを[~.html]にして保存後、Win7か8.1のIE11で開くと同様のことが起こります。
<html> <head> <meta charset="sjis"> <title>タイトル</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> </head> <body> <script type="text/javascript"> function input_textbox(target_control, integer_max) { target_control.value = target_control.value.substr(0, 10); } </script> <textarea id="test_id" oninput="input_textbox(this, 10);" wrap="soft"></textarea> </body> </html>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。