【javascript】テキストの矢印(←、→)キー制御について

前提・実現したいこと

htmlのテキストボックスの制御について教えてください。

現在構築しているシステムでAGGridというUIフレームワークを使用しているのですが、
テキスト内で矢印（←、→）キーによるキャレット(テキスト内のカーソル)移動が無効になってしまいました。
そのため、下記javascript関数(setCaretPosition)を作成し、矢印（←、→）キーがkeydownされるたびにselectionRangeでキャレット移動させるようにしました。
キャレットの移動は実現できたのですが、テキスト入力が表示範囲を超えた場合に表示外への表示ができず、困っています。
javascriptまたはcssなどで表示をキャレットに追従させたいです。

また、そもそも表示が固定されてしまう原因で考えられるものがありましたら
ご教示いただきたいです。

発生している問題

下記のようなテキストで"123456789"と入力がある場合に
右矢印（→）キーを押下しても表示が固定されたままで"9"が表示できません。
※マウスで操作すれば表示可能です。

該当のソースコード

javascript
1function setCaretPosition(event) {
2  var elem = event.target || event.srcElement;
3　if (elem != null) {
4    var obj = document.getElementById(elem.id);
5
6    if (event.keyCode == "37") {
7      // 左矢印キーが押された場合
8      if (obj.selectionStart > 0) {
9        obj.setSelectionRange(obj.selectionStart - 1, obj.selectionEnd);
10      }
11    }
12    if (event.keyCode == "39") {
13      // 右矢印キーが押された場合
14      if (obj.value.length > obj.selectionEnd) {
15        obj.setSelectionRange(obj.selectionStart, obj.selectionEnd + 1);
16      }
17    }
18  }
19};

補足情報（FW/ツールのバージョンなど）

・ブラウザ IE11
・ag-grid-community v20.2.0

Lhankor_Mhy

2021/04/15 05:31

公式サンプルではキャレットの移動ができる様でした。

mcamcalin

2021/04/15 06:57

ご確認いただき、ありがとうございます。説明が悪く申し訳ございません。 AGGridのテキストを使うと思うように動かない状況になります。（サンプルが用意できず申し訳ございません）その状況で上記ソースコードでキャレットの移動が可能となったのですが、表示が固定されたままとなってしまいます。 setSelectionRangeでキャレットを動かした場合に表示を追従させることはできないでしょうか。また、表示が固定されてしまう原因は何か考えられるものはございますでしょうか。

Lhankor_Mhy

2021/04/15 07:00

「AGGridのテキスト」で、詳しい人には通じるのですね。門外漢が的外れなことを申し上げました。大変失礼いたしました。

mcamcalin

2021/04/15 07:11

Lhankor_Mhy様事象確認できる状況も提示できないまま質問してしまい失礼いたしました。一旦取り下げて再質問させていただきます。

Lhankor_Mhy

2021/04/15 07:14

私にその知識がなかっただけの話で、取り下げることはなかったと思いますが…… 余計なことを申し上げてしまいましたね。