有沒有辦法在沒有文本框的情況下在 Javascript/Html 中獲取文本輸入？

Question

我正在嘗試將自定義終端作為具有自定義命令的網站，但我正在努力在不使用文本框的情況下獲取文本輸入。 我試過這個：

<input type='text' id='textInput'>

但它會創建一個文本框。 我也嘗試使用這樣的事件監聽器：

document.addEventListener('keyup', (event)=>{
        if(event.keyCode == 65 ) {
            msg += 'a';
        }
});

但它不起作用，因為它給出了一個錯誤： ReferenceError: document is not defined

即使這樣做了，對每個鍵都這樣做會很慢。

Answer 1

如果您想輸入數據但不想顯示文本框，那么我建議將文本框上的 CSS 設置為opacity: 0; - 例子：

<input style="opacity: 0;" id="textInput" />

<script>
document.getElementById('textInput').focus(); // focus on the element
document.getElementById('textInput').addEventListener('keyup', (event) => {
        if(event.keyCode == 65 ) {
            msg += 'a';
        }
});
</script>

編輯：更新了在 CSS 中使用opacity而不是display的答案

Answer 2

let txt = document.getElementById('textInput')
txt.addEventListener('keyup', (event) => {
        if(event.keyCode == 65 ) {
            msg += 'a';
        }
});

如果您不喜歡使用該框輸入文本的感覺/外觀，您可以隨時使用 CSS 自行編輯

你可以這樣做：

<style>
    #bg{
        background-color: black;
        padding: 10px;
    }
    #textInput{
        color: green; #Change to a color you like
        border: None;
        outline: None;
        line-height: 25px;
        font-family: monospace; #You can also change
        background-color: transparent;
        width: 100%;
</style>

<div id='bg'>
    <input type='text' id='textInput' >
</div>

Answer 3

您不想要文本框的輪廓嗎？ 如果是這樣，請嘗試將其值設置為 0px：

<input type="text" style="border: 0px none;" />

還可以嘗試直接從提示框中獲取輸入：

<button onclick="promptValue()">Try it</button>

<p id="enteredValue"></p>

<script>
function promptValue() {
  var textValue = prompt("Please enter a value");
  document.getElementById("enteredValue").innerHTML = textValue;
}
</script>

Answer 4

一些可能有幫助的語法修復：

1. 使用window document addEventListener的文檔。 如果您要求對某個特定項目發生某些事情，則可能應該使用document 。 （例如document.querySelector('#searchbox') 。）
2. 對於鍵盤命令，使用keydown可能比keyup更有效。
3. 使用嚴格相等 ( === ) 而不是經典相等 ( == )。
4. keyCode已棄用。 改為使用key 。 它也將更容易編碼。 （注意：如果您需要使用大寫字母 A，請考慮使用event.key === 'A' && event.shiftKey 。）

window.addEventListener('keydown', (event) => {
        if(event.key === 'A' ) {
            msg += 'a';
        }
});