jQuery 获取 textarea 文本

Question

最近我开始玩 jQuery，并且一直在学习一些教程。 现在我觉得使用它有点能力（这很容易），我认为如果我能够在我的网页上制作一个“控制台”会很酷（例如，你像在FPS游戏中那样按下 ` 键，等），然后将其 Ajax 本身返回到服务器以执行操作。

我最初认为最好的方法是只获取 textarea 中的文本，然后将其拆分，或者我应该使用 keyup 事件，将返回的键码转换为 ASCII 字符，将字符附加到字符串并将字符串发送到服务器（然后清空字符串）。

我找不到任何关于从 textarea 获取文本的信息，我得到的只是 keyup 信息。 另外，如何将返回的键码转换为 ASCII 字符？

Answer 1

您为什么要将击键转换为文本？ 添加一个按钮，单击该按钮可将文本区域内的文本发送到服务器。 您可以使用value属性作为海报之前指出的内容，或使用jQuery的API：

$('input#mybutton').click(function() {
    var text = $('textarea#mytextarea').val();
    //send to server and process response
});

Answer 2

通常是您使用的文本函数（例如在divs等中），然后在文本区域中是val

得到：

$('#myTextBox').val();

组：

$('#myTextBox').val('new value');

Answer 3

您应该有一个仅包含控制台消息的div，即先前的命令及其输出。 在下面放置一个输入或文本区域，仅保留您正在键入的命令。

-------------------------------
| consle output ...           |
| more output                 |
| prevous commands and data   |
-------------------------------
> This is an input box.

这样，您只需将输入框的值发送到服务器进行处理，然后将结果附加到控制台消息div。

Answer 4

通常，它是value属性

testArea.value

还是您需要的东西缺少我？

Answer 5

我发现可以使用以下函数将事件的keyCode转换为字符：

var char = String.fromCharCode(v_code);

然后从那里将字符附加到字符串，然后按Enter键将字符串发送到服务器。 抱歉，我的问题似乎有点晦涩难懂，标题的含义几乎完全是题外话，是凌晨，而且我还没有吃早餐;）。

感谢您的帮助。

Answer 6

我认为“控制台”一词引起了混乱。

如果要模拟老式的全/半双工控制台，则可以使用以下方法：

$('console').keyup(function(event){
    $.get("url", { keyCode: event.which }, ... );
    return true;
});

event。具有按下的键。 对于退格处理，event.which === 8。

Answer 7

最好的方法：$（'＃myTextBox'）。val（'new value'）。trim（）;

Answer 8

您可以通过名称和 ID 获取 textarea 数据

// 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();

Answer 9

读取textarea值和代码字符转换：

 function keys(e) { msg.innerHTML = `last key: ${String.fromCharCode(e.keyCode)}` if(e.key == 'Enter') { console.log('send: ', mycon.value); mycon.value=''; e.preventDefault(); } } 

 Push enter to 'send'<br> <textarea id='mycon' onkeydown="keys(event)"></textarea> <div id="msg"></div> 

而在不错的Quake之下， 例如仅在div-s上的控制台:)

 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(/&nbsp;/g,' '); conText.innerHTML=''; console.log('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 + '&nbsp;' } 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>