Question

有没有办法在没有文本框的情况下在 Javascript/Html 中输入文本？

2020-12-23

910

javascript html

我试图使用自定义命令将自定义终端制作成网站，但我很难在不使用文本框的情况下输入文本。我试过这个：

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

但它会创建一个文本框。我也尝试使用这样的事件监听器：

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

但它不起作用，因为它给出了一个错误： ReferenceError：文档未定义

即使它确实如此，对每个键都这样做也会很慢。

Answer 1

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 2

如果您想输入数据但不想显示文本框，那么我建议将文本框上的 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 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>