jQuery get textarea text
最近我开始玩jQuery,并且已经关注了几个教程。 现在我觉得使用它有点能干(这很简单),我觉得如果我能够在我的网页上制作一个"控制台"会很酷(就像你在FPS游戏中一样按下'键', 等),然后让Ajax本身回到服务器,以便做的事情。
我原本认为最好的方法是在textarea中获取文本,然后拆分它,或者我应该使用keyup事件,将返回的键码转换为ASCII字符,将字符附加到字符串并将字符串发送到 服务器(然后清空字符串)。
我找不到任何关于从textarea获取文本的信息,我得到的只是密钥信息。 另外,如何将返回的键码转换为ASCII字符?
为什么要将键击转换为文本?添加一个按钮,在单击时将textarea内的文本发送到服务器。你可以在指出之前使用value属性作为海报来获取文本,或者使用jQuery的API:
1 2 3 4 | $('input#mybutton').click(function() { var text = $('textarea#mytextarea').val(); //send to server and process response }); |
通常是您使用的文本函数(例如在div等中),然后对于文本区域,它是val
得到:
1 | $('#myTextBox').val(); |
组:
1 | $('#myTextBox').val('new value'); |
你应该有一个只包含控制台消息的div,即以前的命令及其输出。并在下面放置一个输入或textarea只保存您正在键入的命令。
1 2 3 4 5 6 | ------------------------------- | consle output ... | | more output | | prevous commands and data | ------------------------------- > This is an input box. |
这样,您只需将输入框的值发送到服务器进行处理,并将结果附加到控制台消息div。
通常,它是值属性
1 | testArea.value |
或者你需要什么我缺少的东西?
我已经发现我可以使用以下函数将事件的keyCode转换为字符:
1 | var char = String.fromCharCode(v_code); |
然后我会将字符附加到字符串,当按下回车键时,将字符串发送到服务器。我很抱歉,如果我的问题看起来有点神秘,标题意味着几乎完全偏离主题,那是一大早,我还没吃早餐;)。
谢谢你们的帮助。
将"控制台"这个词拼写成混乱。
如果你想模仿一个旧式的全/半双工控制台,你可以使用这样的东西:
1 2 3 4 | $('console').keyup(function(event){ $.get("url", { keyCode: event.which }, ... ); return true; }); |
event.which有按下的键。对于退格处理,event.which === 8。
最好的方法:
$('#myTextBox')。val('new value')。trim();
读取textarea值和code-char转换:
1 2 3 4 5 6 7 8 9 | function keys(e) { msg.innerHTML = `last key: ${String.fromCharCode(e.keyCode)}` if(e.key == 'Enter') { console.log('send: ', mycon.value); mycon.value=''; e.preventDefault(); } } |
1 2 | Push enter to 'send' <textarea id='mycon' onkeydown="keys(event)"></textarea> |
以下很好的Quake就像div-s上的控制台一样:)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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+= '' + conText.innerHTML; let command=conText.innerHTML.replace(//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 + '' } else { conText.innerHTML = conText.innerText + e.key; } } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 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} |
1 2 3 4 5 6 | Click here and Press tilde ` (and Enter for"send") Hello! > |