jQuery获取textarea文本

最近我开始使用jQuery，并学习了一些教程。现在我觉得有点能力使用它(这是相当容易的)，我认为这将是很酷的，如果我能够在我的网页上做一个“控制台”(就像在，你按'键像你在帧/秒游戏等)，然后让它Ajax本身回到服务器，以便做的东西。

我最初认为最好的方法是只获得文本区域内的文本，然后分割它，或者我应该使用keyup事件，将键码转换为ASCII字符，将字符附加到字符串并将字符串发送到服务器(然后清空字符串)。

我找不到任何关于从文本区域获取文本的信息，我得到的只是按键信息。另外，如何将键码转换为ASCII字符?

797394 次浏览
小开

通常，它是value属性

testArea.value

还是你需要的东西中我遗漏了什么?

小开
最佳答案

为什么要将击键转换为文本?添加一个按钮，在单击时将文本区域内的文本发送到服务器。你可以使用value属性获取文本，就像海报之前指出的那样，或者使用jQuery的API:

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

我已经弄清楚，我可以通过使用以下函数将事件的keyCode转换为字符:

var char = String.fromCharCode(v_code);

从那里，我将把字符附加到一个字符串，当按下enter键时，将字符串发送到服务器。我很抱歉我的问题看起来有点神秘，标题的意思几乎完全偏离主题，现在是早上，我还没有吃早餐;)

谢谢你们的帮助。

小开

您应该有一个div，它只包含控制台消息，即以前的命令及其输出。在下面放一个输入或文本区域，用来保存你正在输入的命令。

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

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

小开

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

如果你想模拟一个老式的全/半双工控制台，你会使用这样的东西:

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

事件。上面有被按下的键。对于退格处理，事件。其中=== 8。

小开

它经常是你使用的文本函数(例如在divs等)，然后为文本区域它是val

得到:

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

设置:

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

最好的方法: $ (" # myTextBox”)。瓦尔(“新价值”).trim (); < / p >

小开

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

下面的地震就像控制台只在div-s上:)

enter image description here

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>

小开

您可以通过名称和id获取文本区域数据

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

提交答案