Есть ли способ получить ввод текста в Javascript/Html без текстового поля?
Я пытаюсь создать собственный терминал как веб-сайт с пользовательскими командами, но я изо всех сил пытаюсь получить ввод текста без использования текстового поля. Я пробовал это:
<input type='text' id='textInput'>
но он создает текстовое поле. Я также пытался использовать прослушиватель событий как таковой:
document.addEventListener('keyup', (event)=>{
if (event.keyCode == 65 ) {
msg += 'a';
}
});
но не работает, выдает ошибку: ReferenceError: документ не определен
и даже если бы это было так, делать это для каждого ключа было бы медленно.
не уверен, как документ не определен.... Как вы добавляете это на страницу? Какой браузер?
@KevinCrum Я очень плохо разбираюсь в css, поэтому, если бы вы могли показать мне пример, это было бы очень полезно, спасибо.
document.addEventListener('keyup', (event)=>{ console.info(event.key) });@epascarello Я следил за ним, теперь он выдает эту ошибку: ReferenceError: addEventListener не определен
Опять же.... Как вы добавляете это на страницу? Какой браузер? –
Извините, я очень тупой, поэтому прошу прощения. Я написал код ввода с клавиатуры в бэкэнде, а не во внешнем интерфейсе. убей меня
@ 2F33T - в чем проблема?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Если вы хотите вводить данные, но не хотите отображать текстовое поле, я предлагаю установить 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>
Обновлено: обновлен ответ для использования opacity вместо display в CSS
Вы не можете сфокусировать ввод, который display: none
@blex Обновил ответ.
Да, это сработает, но второй пример кода OP проще, поскольку он не требует ввода и работает нормально.
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>
Вам не нужен контур текстового поля? Если это так, попробуйте установить его значение на 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>
Несколько исправлений синтаксиса, которые могут помочь:
- Используйте
windowвместоdocumentдляaddEventListener.document, вероятно, следует использовать, если вы требуете, чтобы что-то произошло с одним конкретным элементом. (например,document.querySelector('#searchbox').) - Использование
keydownможет быть более эффективным, чемkeyupдля клавиатурных команд. - Используйте строгое равенство (
===) вместо классического равенства (==). keyCodeустарел. Вместо этого используйтеkey. Также будет легче кодировать. (Примечание: если вам нужно использовать заглавную букву А, рассмотрите возможность использованияevent.key === 'A' && event.shiftKey.)
window.addEventListener('keydown', (event) => {
if (event.key === 'A' ) {
msg += 'a';
}
});
простите мою наивность, но может быть достаточно использовать текстовое поле или текстовую область, стилизованную с помощью css