我正在使用 Angular & Electron 開發一個聊天應用程式。
我希望用戶的游標始終在用戶鍵入訊息的文本區域上。當用戶單擊頁面中的任何其他位置時，游標不應離開文本區域。這有助于用戶隨時隨地鍵入，它只會在 textarea 中鍵入。
我嘗試了以下方法：
setTimeout(() => {
this.messageTextAreaInput.nativeElement.focus();
}, 20);
我在 textarea blur 事件中呼叫它。但是這個解決方案不允許我從其他訊息中復制文本。當我從訊息歷史記錄中選擇任何文本時，我的選擇會丟失。
還有其他方法可以實作這一目標嗎？
我的應用程式供參考：
uj5u.com熱心網友回復：
window.addEventListener("keydown", () => {document.getElementById("textarea").focus()});<textarea id="textarea" ></textarea>uj5u.com熱心網友回復：
試試這個方法。您可以將焦點元素更改為您自己的可聚焦元素。
const focusOnTextInput = () => document.getElementById('input').focus();
document.addEventListener('click', focusOnTextInput);
document.addEventListener('DOMContentLoaded', focusOnTextInput);<input type="text" id="input"/>uj5u.com熱心網友回復：
你可以嘗試使用類似的東西
window.onclick = function(event) {
if (!event.target.matches('.messageTextAreaInputClassName')) {
document.getElementById('messageTextAreaInput').focus();
}
}
因此，單擊文本區域以外的任何位置都會呼叫文本區域來聚焦。
uj5u.com熱心網友回復：
您可以檢查按下了什么鍵，并可選擇將按鍵附加到文本區域。但是，您基本上需要創建一個小型打字應用程式來獲得預期的行為。這是一個小例子，我用它來制作一個類似文本區域的半互動式終端。默認情況下禁用文本區域，并根據需要附加按鍵并存盤在一個名為的變數input中，您可以說它是正在輸入的訊息。
let altCtrl = false;
let input = '';
let txa = document.getElementById("textarea");
window.onkeyup = function(event){
if(event.key == 'Alt' || event.key == 'Control'){
altCtrl=false;
}
};
window.onkeydown = function(event){
let keyPressed = event.key;
const regex = /[^\p{L}]/;
const allowed = /[0-9@#\s]/;
const modifs = [/Shift/, /Alt/, /Backspace/, /Control/, /CapsLock/, /Tab/, /Escape/, /NumLock/, /Home/, /End/, /PageUp/, /PageDown/, /Enter/];
const noPrintModifs = [/Alt/, /Control/];
if(altCtrl == false){
altCtrl = noPrintModifs.some(rx => rx.test(keyPressed));
}
let isMod = modifs.some(rx => rx.test(keyPressed));
if((regex.test(keyPressed) || allowed.test(keyPressed)) && altCtrl == false && isMod == false){
txa.append(keyPressed);
input = input keyPressed;
}
if(keyPressed == 'Backspace'){
txa.readOnly=false;
txa.innerHTML = txa.innerHTML.slice(0, -1);
input = input.slice(0, -1);
txa.readOnly=true;
}
if(keyPressed == 'Enter' && altCtrl){
txa.append('\n');
}
if(keyPressed == 'Enter'){
//do something with input text
input = '';
}
};
提示：您可能想要在allowed正則運算式中添加更多符號。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/439289.html
標籤：javascript html 有角度的 电子
上一篇：觀察者應該在建構式中