jQuery获取textarea文本

486

最近，我开始使用jQuery，并且已经关注了一些教程。现在，我觉得使用它有点能力（这很简单），而且我认为如果能够在网页上制作一个“控制台”，那就太酷了（例如，像在FPS游戏中一样按下“键” ，等），然后将其Ajax本身返回到服务器以进行处理。

我原本以为最好的方法是将文本放入文本区域内，然后将其拆分，或者我应该使用keyup事件，将返回的键码转换为ASCII字符，将该字符附加到字符串中并将该字符串发送到服务器（然后清空字符串）。

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

javascript jquery ajax

— 罗杰
source

713

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

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

— 伊兰·加珀林
source

2

因为文本区域将包含更多的内容，所以仅包含所需的文本。（它是控制台，可视化命令提示符）。感谢您提供有关val函数的信息。:)

— RodgerB

您可以使用javascript处理文本。返回按键代码的目的是什么？

— 伊兰·加珀林

关键在于，获得键盘按键代码将比用定界符分割文本区域（图片可能是较大的文本数组）更有效。

— RodgerB

2

抱歉，我无法想象这是正确的情况……也许，如果您编辑了原始帖子并添加了一个示例，它将帮助人们尝试回答

— Eran Galperin

我忘了html标签ID

— 前面

36

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

得到：

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

组：

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

— 托马斯·科耶尔
source

24

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

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

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

— p3drosola
source

是的，正是我的想法。这是唯一不涉及从输出中解析输入的愚蠢解决方案（愚蠢地尝试-如果用户在某个“输出”上键入内容怎么办），或者尝试从击键事件构建字符串（愚蠢地尝试） -退格键等等？）。

— Nick Perkins

3

SO上的另一个XY问题。显然，这是解决他的问题“ X”的最佳解决方案。

— Reimius

14

通常，它是value属性

testArea.value

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

— bl
source

我实际上希望调用一个textchanged事件或沿线的东西（无论如何，我可以很轻松地用keyup事件来做到这一点）。我想我会坚持使用keyup事件，但是您知道一种将键码转换为ASCII字符的方法吗？谢谢。:)

— RodgerB

8

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

var char = String.fromCharCode(v_code);

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

感谢您的帮助。

— 罗杰
source

7

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

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

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

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

— 埃里克
source

2

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

— 阿博法兹（Abolfazl Miadian）
source

0

读取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>

展开摘要

— 卡米尔（KamilKiełczewski）
source

0

您可以通过名称和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();

— 用户889030
source