textarea.selectionEnd 總是等於 textarea.value 中的最后一個字符

Question

        function makeBold() {
            ta = document.getElementById('instructions');
            if (ta.selectionStart != ta.selectionEnd) {
                ta.value = [ta.value.slice(0, ta.selectionStart), '<strong>', ta.value.slice(ta.selectionStart)].join('');
                ta.value = [ta.value.slice(0, ta.selectionEnd), '</strong>', ta.value.slice(ta.selectionEnd)].join('');
            }
        }

我寫了這個由按鈕的on_click事件觸發的 function。 .selectionStart返回所選文本的開頭，但.selectionEnd始終返回 textearea 值的最后一個字符，而不是所選文本結束的索引。

我對此進行了測試：

                console.log(ta.selectionEnd, ta.value.length)

他們都返回相同的。

誰能幫我看看我在這里誤解了什么？

Answer 1

有點橡皮鴨的時刻。

我已經用代碼解決了這個問題：

        function makeBold() {
            ta = document.getElementById('instructions');
            const start = ta.selectionStart;
            const end = ta.selectionEnd;
            if (ta.selectionStart != ta.selectionEnd) {
                ta.value = [ta.value.slice(0, start), '<strong>', ta.value.slice(start)].join('');
                ta.value = [ta.value.slice(0, end+8), '</strong>', ta.value.slice(end+8)].join('');
            }
        }

我懷疑編輯 textarea 的值會刪除當前選擇，所以我先捕獲了選擇的開始和結束，然后進行編輯。 我還將 8 加到 .selectionEnd 的值以說明 '' 中的 8 個字符。