テキストエリアで1行4文字で改行する

コード
```### 前提・実現したいこと
テキストエリアに入力があった場合、全角でも半角でも1行あたり最大4文字で改行させたいです。
（※自分で改行した場合はその改行が反映される。）
キー入力を契機にJavascriptで制御しようとしています。（他に方法があればどんな方法でも良いです。）
実現可能かどうかだけでもご教授いただける方がいらっしゃいましたら、お願いいたします。

0901追記　1行あたり4文字で改行
⇒1行あたり最大4文字で改行
（※自分で改行した場合はその改行が反映される。）

### 発生している問題・エラーメッセージ
問題は2点あります。
１．全角文字の場合うまくいきません。
　　変換中など、入力が確定状態でない場合、改行は4文字でされますが改行前の入力がうまく改行後に引き継がれません。
２．キー入力を文の途中からはじめたり、文字を削除した場合はキー入力がうまくいきません。
　　（キーの位置は入力後、打ち終わった文字の直後。デフォルトのテキストエリアと、4文字改行以外は全く同じ仕様感にしたい）

### 該当のソースコード
```lang-HTML
<!doctype html>
<textarea id="tmp" name="tmp" rows="10" cols="20" style="overflow:auto" wrap="OFF"></textarea>

<script type="text/javascript">

let area = document.getElementById('tmp');
area.addEventListener('input', kaigyo);

function kaigyo() {
    var maxRow = 4;
    var lines = area.value.split("\n");

   for(var i = 0; i < lines.length; i++) {
        if(lines[i].length > maxRow){
            lines.push("");
            var tmpMoji = lines[i+1];
            lines[i+1] = lines[i].slice(maxRow) + tmpMoji;    
            lines[i] = lines[i].slice(0, maxRow);        
        }
    }
    area.value = lines.join("\n");
}
</script>
</html>

補足情報

ブラウザは何でも良いですが、IE、Edgeで当方は試しました。

Zuishin

2020/08/28 00:49

たとえば次の場合あいうえおかきくけこ先頭に「さ」を挿入すると次のうちどちらになりますか？さあいうえおかきくけこさあいうえおかきくけこ

Zuishin

2020/08/28 15:17 編集

別の質問と間違えたので削除

yamada_1984

2020/08/28 15:07

質問ありがとうございます！・先頭に「さ」を挿入すると以下になります。さあいうえおかきくけこ他の事例を挙げると、 1行4列目にさを打とうとすると、以下のようになります。【挿入前】 aaaa aaaa aaaa 【挿入後】 aaaa ｓaaa aaaa a さ私のプログラムでは、oninputなので日本語入力確定前に改行後の文字列を作り出しているからこのように滅茶苦茶な表示になってしまいます。半角入力のみという制限があれば実現できそうな気はしているのですが…。

yamada_1984

2020/08/28 15:17

>>Zuishin　さん度々投稿ありがとうございます! 本当ですか？しかも二種類もですか？いただけるのでしたら是非欲しいです!

yamada_1984

2020/08/28 15:18

>>Zuishin　さん誤爆とのこと、承知しました。何かヒントにつながりそうなことがわかれば是非また投稿お願いいたします！

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

回答1件

実現可能かどうかだけでもご教授いただける方がいらっしゃいましたら、お願いいたします。

「可能」です。ただ、ご希望の動作を実現するのはなかなか至難の業です。
もし、全角しか反応しなくていいならこんなコードで実現できますが、全角入力中なのか半角入力中なのかを判別する仕様がブラウザごとに違う状況なので、なかなか、、、

完成品ではありませんがご参考までに。。

JS
1document.getElementsByTagName('textarea')[0].addEventListener('compositionend', () => {
2  let words = document.getElementsByTagName('textarea')[0].value.replace(/\r?\n/g,"").match(/[\s\S]{1,4}/g);
3  let result = "";
4  for( let i = 0; i < words.length ; i++ ){
5    result += words[i] + (words.length - 1 === i ? "" : "\n");
6  }
7  document.getElementsByTagName('textarea')[0].value = result;
8});

投稿2020/08/29 19:18

kyoya0819

総合スコア10429

kyoya0819

2020/08/29 19:21

Enterで成型する。とかだとものすごく簡単です。

yamada_1984

2020/08/31 15:04

回答ありがとうございます。「1行あたり4文字で改行」と記載してしまっておりましたが、 MAX4文字で改行が目指す仕様です。すいません。なので途中で4文字未満で自ら改行した場合はそれが生きる仕様としたいです。ブラウザ間の違いがあって全角・半角区別が難しそうですね。文中でキー入力した場合のキーの位置はなんとかなりそうですが、全角・半角判別が無理そうです。ですが大変参考になりました。ありがとうございます。

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