ボタンから文字入力して、テキストボックスのキャレットを追従して表示したい

前提・実現したいこと

ボタンを押すと文字をテキストボックスに追加する
テキストボックスにフォーカスを当てる
キャレットの表示を維持する
キャレットを追従して文字を表示したい

発生している問題

IE11にテキストボックスの右端を超える文字を追加すると表示状態がキャレットの位置に追従してくれない

該当のソースコード

js
1function addChar(keyChar) {
2  const textArea = document.getElementById('terabox');
3  const caretPos = textArea.selectionStart;
4  const addedMessage = this.insertChar(textArea.value, caretPos, keyChar);
5  textArea.value = addedMessage;
6  textArea.setSelectionRange(caretPos+1, caretPos+1);
7  textArea.focus();
8}
9
10function insertChar(messageValue, pos, char){
11  return messageValue.slice(0, pos) + char + messageValue.slice(pos);
12}

html
1<body>
2  <input id="terabox" type="text" /><br><br>
3  <button onclick="addChar('T')">T</button>
4  <button onclick="addChar('E')">E</button>
5  <button onclick="addChar('R')">R</button>
6  <button onclick="addChar('A')">A</button>
7</body>

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

回答2件

MS に報告されたことがあるようですが、修正されたのは Edge のみのようです。
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15637833/

ということで、IE用には TextRange の操作で回避するのはどうでしょうか？

JScript
1  if (textArea.createTextRange) {
2    var range = textArea.createTextRange();
3    range.move('character', caretPos + 1);
4    range.select();
5  }

https://msdn.microsoft.com/en-us/ie/ms536401(v=vs.94)

投稿2019/03/22 04:54

x_x

総合スコア13749

tictak

2019/03/23 02:40

ご回答ありがとうございます。自己解決しました。自分の回答を解決済みにしてからで申し訳なかったですが、載せてもらったコードのほうがきれいな感じでいいですね。

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

自己解決

自己解決というより知人に聞いたら解決できました。

即時関数を利用して、選択範囲を削除してから値を再設定を行い。キャレット位置を設定する

js
1function addChar(keyChar) {
2  const textArea = document.getElementById('terabox');
3  const caretPos = textArea.selectionStart;
4  const addedMessage = this.insertChar(textArea.value, caretPos, keyChar);
5
6  textArea.value = addedMessage;
7
8  (function (v) {
9    document.execCommand("delete", false, null);
10    textArea.value = v;
11  })(textArea.value);
12
13  textArea.setSelectionRange(caretPos + 1, caretPos + 1);
14  textArea.focus();
15}