textareaの行数・一行あたりの文字数制限による意図しない動作について

Question

こういった場での質問になれていない為不備があればすみません。

概要

textareaに付加している行数・一行あたりの文字数制限について、2点の意図しない動作があり修正できず困っています。
できればIE11でも意図通りに動くようにしたいですが、最悪Chromeなどのモダンブラウザのみでも動くようになって欲しいです。

処理内容

textareaに4行まで・一行あたり65文字まで入力可能な制限を掛ける

意図しない動作①

何行か入力したあと、途中の行で改行をしても末尾の改行になってしまう

意図しない動作②

半角モード時に改行をすると、4行未満でも改行が削除されてしまう

ソース、デモ

Codepen

<textarea id="area" rows="4" cols="65"></textarea>

(function() {
    'use strict';
    const sliceText = function(e) {
        let lines=this.textarea.value.split("\n");
        // 各行を指定した文字数に切り捨てる
        for(let i=0; i<lines.length; i++){
            if(lines[i].length >this.len){
                lines[i]=lines[i].substr(0,this.len);
            }
        }
        this.textarea.value = "";
        // 指定された行数までに切り捨てる
        for(let j=0; j<this.row; j++){
            if(lines[j]){
                if(j > 0 && j < this.row) this.textarea.value+="\n";
                this.textarea.value+=lines[j];
            }
        }
    }
    const textArea = document.querySelector('textarea[id*="area"]');
    const obj = {textarea: textArea, len: 65, row: 4, handleEvent: sliceText};
    textArea.addEventListener("keypress", obj);
    textArea.addEventListener("focusout", obj);
})();

Answer 1

そもそも論ですが、その制限は入力中にやらなければいけないのでしょうか。

入力している途中で文字列に変更をかけると、「変換途中の入力が確定しまう」などの不安定な挙動を示す例があったり、「入力したけど即座に削られるために入力が適用されない」など、ユーザーから見た操作性が悪くて混乱を招くことも考えられます。

すでにfocusoutでイベントを仕掛けていますが、そちらのタイミングだけでもいいかもしれません。

（「入力中にも制限する動作」自体が必要なら、この回答は無視してください）

Comments

[FMK]

まったくもって仰る通りなのですが、先方からの要望もあり上記のような制限になっています。
ただ、不安定な動作がどうしても解消できない場合は別の方法による制限の交渉も考えています。
ひとまずは要望通りの動作で動くことができないか検証したく、質問させて頂きました。

[maisumakun]

入力中に変更を行う場合、文字列を生成してから、selectionStartやselectionEndを使ってカーソル位置も制御する必要があるかと思います。

Answer 2

MDN HTMLTextAreaElement
「例」セクション「HTML タグを挿入する例」や「長さと行数の制限の例」は参考になるかもしれません。

• selectionStart
• selectionEnd
• selectionDirection

---

「65文字」ということですが、 Unicode の文字には HalfWidth（半角文字）、FullWidth（全角文字） の２種類があるので、見栄え上のcols="65" が HalfWidth 基準になることを考慮する必要もありそうです。

また、for　ループで走査されていますが、キー入力に反応するイベントの場合、String オブジェクトのメソッドでポインタ計算するなど、数値演算できるものはそうしたほうが良いのではないでしょうか。

CODEPEN（不完全です）

最後に、PCブラウザだけでなくスマホやタブレットでの挙動も実機で確認する必要があると思います
（ソフトウェアキーボードがイベントに対応していて、正しく補足できるかなどの確認）