jQuery ottiene il testo di textarea

Di recente ho iniziato a giocare con jQuery e ho seguito un paio di tutorial. Ora mi sento un po 'competente nell'usarlo (è abbastanza facile) e ho pensato che sarebbe bello se fossi in grado di creare una "console" sulla mia pagina web (come in, premi il tasto `come fai nei giochi FPS , ecc.), e poi riavviare Ajax sul server per fare le cose.

Inizialmente pensavo che il modo migliore fosse quello di ottenere il testo all'interno dell'area di testo e quindi dividerlo, o dovrei usare l'evento keyup, convertire il codice chiave restituito in un carattere ASCII, aggiungere il carattere a una stringa e inviare la stringa a il server (quindi svuotare la stringa).

Non sono riuscito a trovare alcuna informazione su come ottenere testo da un'area di testo, tutto quello che ho ottenuto sono informazioni di keyup. Inoltre, come posso convertire il codice chiave restituito in un carattere ASCII?

Perché vorresti convertire i tasti premuti in testo? Aggiungi un pulsante che invia il testo all'interno dell'area di testo al server quando si fa clic. È possibile ottenere il testo utilizzando l'attributo value come precedentemente indicato dal poster oppure utilizzando l'API di jQuery:

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

Dove è spesso la funzione di testo che usi (ad es. In div ecc), allora per l'area di testo è val

ottenere:

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

impostato:

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

Dovresti avere un div che contenga solo i messaggi della console, ovvero i comandi precedenti e il loro output. E sotto inserisci un input o textarea che contiene solo il comando che stai digitando.

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

In questo modo è sufficiente inviare il valore della casella di input al server per l'elaborazione e aggiungere il risultato al div dei messaggi della console.

Normalmente, è la proprietà value

testArea.value

O c'è qualcosa che mi manca in quello che ti serve?

Ho capito che posso convertire il keyCode dell'evento in un personaggio usando la seguente funzione:

var char = String.fromCharCode(v_code);

Da lì aggiungerei quindi il carattere a una stringa e, quando viene premuto il tasto Invio, invio la stringa al server. Mi dispiace se la mia domanda mi è sembrata in qualche modo criptica, e il titolo significa qualcosa di quasi completamente fuori tema, è mattina presto e non ho ancora fatto colazione;).

Grazie per tutto il vostro aiuto ragazzi.

Pensa che la parola "console" stia causando confusione.

Se desideri emulare una console full / half duplex vecchio stile, utilizzeresti qualcosa del genere:

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

event.che ha il tasto premuto. Per la gestione del backspace, event.which === 8.

il modo migliore: $ ('# myTextBox'). val ('new value'). trim ();

Leggi valore textarea e conversione code-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>

E qui sotto Quake come console solo su 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>

puoi ottenere dati textarea per nome e 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();