Edgeブラウザでフォーカスを外したinput欄の表示を、フォーカスを外す前に指定した文字列の位置と同様にしたい

実現したいこと

inputの幅を超える文字数を入力した場合、
Edgeブラウザの場合、フォーカスを外した後は必ず左寄せで表示され、右端の文字が見切れている状態になります。

入力例：あいうえおかきくけこ　で表示幅がsize="5"の場合、カーソルが如何なる文字と文字の間にあったとしても、フォーカスアウト後は"あいうえお"（"か"以降は見切れている）が表示された状態になります。

IEブラウザの場合、例えばカーソルを"く"と"け"の間に指定し、フォーカスアウトすると、
"おかきくけこ"（"あいうえ"以降は見切れている）と表示されます。

該当コードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css">
    <title>sample</title>
</head>
<body>
    <div class="sample">
        <h1>テキストボックス</h1><br>
        <input type="text" id="myInput" value="あいうえおかきくけこ" size="5" />
    </div>
    <script>
        const input = document.getElementById('myInput');
        let inputScrollLeft = 0;

        // ページロード時にscrollLeftの値を復元
        window.addEventListener('load', () => {
            const savedScrollPosition = localStorage.getItem('inputScrollLeft');
            if (savedScrollPosition) {
                // テキストの幅を計算してscrollLeftを設定
                const textWidth = input.scrollWidth; // 入力内容の全体の幅
                const inputWidth = input.clientWidth; // 入力フィールドの幅
                input.scrollLeft = Math.max(textWidth - inputWidth, 0); // 右端を表示
            }
        });

        // scrollLeftの値を保存する関数
        function saveScrollPosition() {
            // 一時的にフォーカスを外してスクロール位置を取得
            setTimeout(() => {
                localStorage.setItem('inputScrollLeft', input.scrollLeft); // 値をlocalStorageに保存
            }, 0);
            console.log(input.scrollLeft);
        }

        // フォーカスが外れた時にscrollLeftの値を保存
        input.addEventListener('blur', saveScrollPosition);
    </script>
</body>
</html>

Edgeブラウザも、IEブラウザと同様に設定する方法をご存じであればご教示いただけますと幸いです。

発生している問題・分からないこと

Edgeブラウザにおいて、input欄をフォーカスアウトしたとき、IEブラウザと同様、指定した文字位置が保存されるようにする方法がわからない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8" />
5    <link rel="stylesheet" href="style.css">
6    <title>sample</title>
7</head>
8<body>
9    <div class="sample">
10        <h1>テキストボックス</h1><br>
11        <input type="text" id="myInput" value="あいうえおかきくけこ" size="5" />
12    </div>
13    <script>
14        const input = document.getElementById('myInput');
15        let inputScrollLeft = 0;
16
17        // ページロード時にscrollLeftの値を復元
18        window.addEventListener('load', () => {
19            const savedScrollPosition = localStorage.getItem('inputScrollLeft');
20            if (savedScrollPosition) {
21                // テキストの幅を計算してscrollLeftを設定
22                const textWidth = input.scrollWidth; // 入力内容の全体の幅
23                const inputWidth = input.clientWidth; // 入力フィールドの幅
24                input.scrollLeft = Math.max(textWidth - inputWidth, 0); // 右端を表示
25            }
26        });
27
28        // scrollLeftの値を保存する関数
29        function saveScrollPosition() {
30            // 一時的にフォーカスを外してスクロール位置を取得
31            setTimeout(() => {
32                localStorage.setItem('inputScrollLeft', input.scrollLeft); // 値をlocalStorageに保存
33            }, 0);
34            console.log(input.scrollLeft);
35        }
36
37        // フォーカスが外れた時にscrollLeftの値を保存
38        input.addEventListener('blur', saveScrollPosition);
39    </script>
40</body>
41</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

teratailで、https://teratail.com/questions/144918　の質問は見つけたのですが、根本的な解決方法には至りませんでした。

補足

特になし

juner

2024/10/02 04:53 編集

savedScrollPosition は読み込んではいるもののフラグとしか使われていない様に見えますが、使っているのでしょうか？

appengineer

2024/10/02 05:53

juner 様お世話になっております。ご回答頂き、誠に有難うございます。仰る通り、savedScrollPosition をフラグのみで使用しており、scrollLeft の値に反映することができておりませんでした。お陰様で問題の原因が明確になり、改善策を考えることができました。

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

回答2件

ベストアンサー

js
1document.querySelector('#myInput').addEventListener('blur', e => {
2  const offset = e.target.scrollLeft;
3  setTimeout(() => {
4    e.target.scrollLeft = offset;
5  }, 0);
6});