jQuery obtener texto de área de texto

Recientemente comencé a jugar con jQuery y seguí algunos tutoriales. Ahora me siento un poco competente para usarlo (es bastante fácil), y pensé que sería genial si pudiera hacer una 'consola' en mi página web (como en, presionas la tecla 'como lo haces en los juegos de FPS , etc.), y luego haga que Ajax vuelva al servidor para hacer cosas.

Originalmente pensé que la mejor manera sería simplemente obtener el texto dentro del área de texto, y luego dividirlo, o si debería usar el evento keyup, convertir el código clave devuelto a un carácter ASCII, agregar el carácter a una cadena y enviar la cadena a el servidor (luego vaciar la cadena).

No pude encontrar ninguna información sobre cómo obtener texto de un área de texto, todo lo que obtuve fue información clave. Además, ¿cómo puedo convertir el código clave devuelto a un carácter ASCII?

¿Por qué querrías convertir las pulsaciones de teclas en texto? Agregue un botón que envía el texto dentro del área de texto al servidor cuando se hace clic. Puede obtener el texto usando el atributo de valor como el cartel antes ha señalado, o usando la API de jQuery:

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

Donde a menudo es la función de texto que usa (por ejemplo, en divs, etc.), entonces para el área de texto es val

obtener:

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

conjunto:

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

Debe tener un div que solo contenga los mensajes de la consola, es decir, los comandos anteriores y su salida. Y debajo coloque una entrada o área de texto que solo contenga el comando que está escribiendo.

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

De esta forma, simplemente envía el valor del cuadro de entrada al servidor para su procesamiento y agrega el resultado al div de los mensajes de la consola.

Normalmente, es la propiedad de valor

testArea.value

¿O hay algo que me falta en lo que necesitas?

He descubierto que puedo convertir el KeyCode del evento en un carácter mediante la siguiente función:

var char = String.fromCharCode(v_code);

A partir de ahí, agregaría el carácter a una cadena y, cuando se presione la tecla Intro, enviaría la cadena al servidor. Lo siento si mi pregunta parecía algo críptica, y el título significa algo casi completamente fuera de tema, es temprano en la mañana y todavía no he desayunado;).

Gracias por toda su ayuda chicos.

Me parece que la palabra "consola" está causando la confusión.

Si desea emular una consola full / half duplex de estilo antiguo, usaría algo como esto:

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

evento.que tiene la tecla que se presionó. Para el manejo de retroceso, event.which === 8.

la mejor manera: $ ('# myTextBox'). val ('nuevo valor'). trim ();

Lea el valor del área de texto y la conversión de código-char:

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>

Y a continuación, agradable Quake como consola solo en 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>

puede obtener datos de área de texto por nombre e identificación

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