如何將光標/文本位置指示器添加到<textarea>由javascript控制？

Question

這個問題是從超級用戶遷移過來的，因為它可以在 Stack Overflow 上回答。 昨天遷移。

我正在制作一個像網站（這里）這樣的打字機，它使用 textarea 和 javascript（來自按鈕點擊）從 textarea 添加/刪除。

我想添加的下一件事是一個指示器，用於顯示下一次更新（插入/刪除）的位置，所以我猜它總是在 textarea 值的位置。

與其他解決方案沖突的關鍵細節是

• textarea 被禁用（+ 它是一個 textarea 而不是 ap 標簽）
• 用戶通過使用按鈕而不是通過鍵盤輸入來添加字符
• 用戶在打字時沒有選擇或有選擇
• 一些解決方案涉及破壞網站的css

這就是我插入字符的方式

function insert(char) {
    document.getElementById("textarea").value += char
    update()
}

到 textarea + 一個按鈕

<textarea id="textarea" class="textarea" disabled>
</textarea>

<a onclick="insert('1')"> 
    <div class="letterbox">
        <p class="typewritter">1</p>
    </div> 
</a>

（順便說一句，我知道我在網站上拼錯了打字機，稍后會修復）

Answer 1

我認為覆蓋 textarea 屬性是沒有意義的。 您想要的指標已經在它的特性中。

從您的textarea刪除disabled標簽，並使用以下代碼片段阻止鍵盤按下。 [因為不使用鍵盤打字是你的特點]

document.onkeydown = function (e)  {
  return false;
} 

如果你願意，你可以將函數綁定到textarea焦點操作。

Answer 2

我對此的建議是讓 textarea 處於活動狀態，而不是禁用並始終處於焦點。 這樣你就會得到你想要的閃爍效果。 然后在 textarea 上有一個pointer-events:none css，這樣沒有人可以點擊它，你就有了你想要的眨眼。 所以我的步驟是：

1. 從 textarea 中刪除disabled
2. 將pointer-events:none css 規則添加到 textarea
3. 在update()函數上，我觀察添加一個focus或一個click事件，以便 textarea 將焦點放在每個insert()

Answer 3

如果您想創建自定義插入點（閃爍的線），您可以通過從文本中添加和刪除所選符號（例如“|”）來實現。 也許這樣的事情會做：

const insertionSymbol = '|';
const blinkInterval = 1000; // time in ms between insertion point updates
let blinking = true; // whether the insertion line is hidden
let textarea = document.getElementById('textarea');
setInterval(function() {
    if(blinking) {
        textarea.value += insertionSymbol;
    } else {
        textarea.value = textarea.value.slice(0,-1);
    }
    blinking = !blinking;
}, blinkInterval);

這將需要您更改插入和刪除功能：

function insert(char) {
    if(blinking) {
        textarea.value += char;
    } else {
        // inserting the character before the insertion point by removing the insertion point temporarily 
        textarea.value = textarea.value.slice(0,-1) + char + insertionSymbol; 
    }
}
function delete() {
    if(blinking) {
        textarea.value = textarea.slice(0,-1);
    } else {
        // deleting the character before the insertion point by removing the insertion point temporarily 
        textarea.value = textarea.value.slice(0,-2) + insertionSymbol; 
    }
}

這個想法可以擴展。 例如，如果您想添加一個插入點冷卻（即更改插入點以在更新后保持可見一段時間，就像您在大多數文本編輯器中看到的那樣），您可以將間隔更改為每毫秒運行一次，並且為下一次更新添加一個計時器。 像這樣：

// ... all the variable definitions like before
let timer = blinkInterval;
setInterval(function() {
    timer --;
    if(timer == 0) {
        if(blinking) {
            textarea.value += insertionSymbol;
        } else {
            textarea.value = textarea.value.slice(0,-1);
        }
        blinking = !blinking;
        timer = blinkInterval;
    }
}, 1);
function insert(char) {
    if(blinking) {
        blinking = false;
        textarea.value += char + insertionSymbol;
    } else {
        // inserting the character before the insertion point by removing the insertion point temporarily 
        textarea.value = textarea.value.slice(0,-1) + char + insertionSymbol; 
    }
    timer = blinkInterval;
}
function delete() {
    if(blinking) {
        blinking = false;
        textarea.value = textarea.slice(0,-1) + insertionSymbol;
    } else {
        // deleting the character before the insertion point by removing the insertion point temporarily 
        textarea.value = textarea.value.slice(0,-2) + insertionSymbol; 
    }
    timer = blinkInterval;
}

注意：我是盲目地編寫代碼（我沒有運行它以查看它是否有效），因此對於任何錯誤，我提前表示歉意。

Answer 4

一種方法是讓循環不停地運行（可能帶有requestAnimationFrame ？）來添加和刪除| 每隔一秒的字符，這將模擬您在大多數文本區域內的常用文本位置指示器