关于javascript:jQuery获取textarea文本

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!
 
     >