Недавно я начал играть с jQuery и слежу за парой руководств. Теперь я чувствую себя немного компетентным в его использовании (это довольно просто), и я подумал, что было бы здорово, если бы я смог сделать 'консоль' на своей веб-странице (например, вы нажимаете клавишу `, как в играх FPS, и т. д.), а затем вернуть Ajax на сервер для выполнения каких-либо действий.
Первоначально я думал, что лучший способ - просто получить текст внутри текстового поля, а затем разделить его, или я должен использовать событие keyup, преобразовать код ключа, возвращенный в символ ASCII, добавить символ в строку и отправить строку в сервер (затем очистите строку).
Я не мог найти никакой информации о получении текста из текстового поля, все, что я получил, это информация о клавиатуре. Кроме того, как я могу преобразовать код клавиши, возвращенный в символ ASCII?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Обычно это свойство значения
testArea.value
Или мне чего-то не хватает в том, что вам нужно?
Зачем вам нужно преобразовывать нажатия клавиш в текст? Добавьте кнопку, которая при нажатии отправляет текст внутри текстового поля на сервер. Вы можете получить текст, используя атрибут value, как было указано ранее, или используя jQuery API:
$('input#mybutton').click(function() {
var text = $('textarea#mytextarea').val();
//send to server and process response
});
Потому что текстовое поле будет содержать больше, чем просто необходимый текст. (это консоль, визуализируйте командную строку). Спасибо за информацию о функции val. :)
Вы можете обрабатывать текст с помощью javascript. Какой смысл возвращать коды нажатия клавиш?
Дело в том, imo, получение кода нажатия клавиши было бы более эффективным, чем разделение текстового поля разделителем (изобразите, возможно, большой массив текста).
Извините, я не могу представить себе сценарий, в котором это было бы правдой ... может быть, если вы отредактируете свой исходный пост и добавите пример, это поможет людям, пытающимся ответить
Я забыл часть textarea перед идентификатором тега html
Я понял, что могу преобразовать keyCode события в символ, используя следующую функцию:
var char = String.fromCharCode(v_code);
Оттуда я бы добавил символ в строку, и, когда нажата клавиша ввода, отправил бы строку на сервер. Прошу прощения, если мой вопрос показался несколько загадочным, а заголовок означал что-то почти не по теме, раннее утро, а я еще не позавтракал;).
Спасибо за вашу помощь, ребята.
У вас должен быть div, который содержит только сообщения консоли, то есть предыдущие команды и их вывод. И под ним поместите поле ввода или текстовое поле, которое просто содержит команду, которую вы вводите.
-------------------------------
| consle output ... |
| more output |
| prevous commands and data |
-------------------------------
> This is an input box.
Таким образом, вы просто отправляете значение поля ввода на сервер для обработки и добавляете результат в div сообщений консоли.
Да, именно то, о чем я думал. Это единственное чистое решение, которое не предполагает либо разбора ввода от вывода (глупо пытаться - что, если пользователь вводит какой-то «вывод»), либо попытки создать строку из событий нажатия клавиш (глупо пытаться - а как насчет обратных пробелов и т. д.?).
Еще одна проблема XY на SO. Это явно лучшее решение «Х» его проблемы.
Мне кажется, что слово «консоль» вызывает путаницу.
Если вы хотите эмулировать полнодуплексную / полудуплексную консоль старого стиля, вы должны использовать что-то вроде этого:
$('console').keyup(function(event){
$.get("url", { keyCode: event.which }, ... );
return true;
});
event., у которого есть нажатая клавиша. Для обработки обратного пробела event.which === 8.
Если вы часто используете текстовую функцию (например, в div и т. д.), То для текстовой области это val.
получить:
$('#myTextBox').val();
набор:
$('#myTextBox').val('new value');
лучший путь: $ ('# myTextBox'). val ('новое значение'). trim ();
Прочтите значение textarea и преобразование кода в символ:
function keys(e) {
msg.innerHTML = `last key: ${String.fromCharCode(e.keyCode)}`
if (e.key == 'Enter') {
console.info('send: ', mycon.value);
mycon.value='';
e.preventDefault();
}
}Push enter to 'send'<br>
<textarea id='mycon' onkeydown = "keys(event)"></textarea>
<div id = "msg"></div>И ниже красивая консоль Землетрясение как только на div-е :)
document.addEventListener('keyup', keys);
let conShow = false
function keys(e) {
if (e.code == 'Backquote') {
conShow = !conShow;
mycon.classList.toggle("showcon");
} else {
if (conShow) {
if (e.code == "Enter") {
conTextOld.innerHTML+= '<br>' + conText.innerHTML;
let command=conText.innerHTML.replace(/ /g,' ');
conText.innerHTML='';
console.info('Send to server:', command);
}
else if (e.code == "Backspace") {
conText.innerHTML = conText.innerText.slice(0, -1);
} else if (e.code == "Space") {
conText.innerHTML = conText.innerText + ' '
} else {
conText.innerHTML = conText.innerText + e.key;
}
}
}
}body {
margin: 0
}
.con {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
width: 100%;
height: 90px;
background: rgba(255, 0, 0, 0.4);
position: fixed;
top: -90px;
transition: top 0.5s ease-out 0.2s;
font-family: monospace;
}
.showcon {
top: 0px;
}
.conTextOld {
color: white;
}
.line {
display: flex;
flex-direction: row;
}
.conText{ color: yellow; }
.carret {
height: 20px;
width: 10px;
background: red;
margin-left: 1px;
}
.start { color: red; margin-right: 2px}Click here and Press tilde ` (and Enter for "send")
<div id = "mycon" class = "con">
<div id='conTextOld' class='conTextOld'>Hello!</div>
<div class = "line">
<div class='start'> > </div>
<div id='conText' class = "conText"></div>
<div class='carret'></div>
</div>
</div>вы можете получить данные текстового поля по имени и идентификатору
// by name
<textarea name = "comment"></textarea>
let text_area_data = $('textarea[name = "comment"]').val();
// by id
<textarea id = "comment" name = "comment"></textarea>
let text_area_data = $('textarea#comment').val();
Я действительно надеюсь, что будет вызвано событие textchanged или что-то в этой строке (в любом случае я мог бы сделать это довольно легко с помощью события keyup). Я думаю, что буду продолжать использовать событие keyup, но знаете ли вы, как преобразовать код клавиши в символ ASCII? Спасибо. :)