jQuery ruft Textbereichstext ab

Vor kurzem habe ich angefangen, mit jQuery zu spielen, und habe einige Tutorials verfolgt. Jetzt fühle ich mich ein wenig kompetent mit der Verwendung (es ist ziemlich einfach) und ich dachte, es wäre cool, wenn ich eine "Konsole" auf meiner Webseite erstellen könnte (wie in, drücken Sie die "Taste" wie in FPS Spielen . etc.), und dann Ajax selbst zurück zum Server, um Sachen zu machen.

Ich dachte ursprünglich, der beste Weg wäre, den Text einfach in den Textbereich zu bekommen und ihn dann zu teilen, oder sollte ich das Schlüsselereignis verwenden, den zurückgegebenen Schlüsselcode in ein ASCII-Zeichen konvertieren, das Zeichen an eine Zeichenfolge anhängen und die Zeichenfolge an senden der Server (dann leeren Sie die Zeichenfolge).

Ich konnte keine Informationen zum Abrufen von Text aus einem Textbereich finden. Ich erhielt lediglich Keyup-Informationen. Wie kann ich den zurückgegebenen Schlüsselcode in ein ASCII-Zeichen konvertieren?

Warum sollten Sie Tastenanschläge in Text konvertieren? Fügen Sie eine Schaltfläche hinzu, die den Text innerhalb des Textbereichs beim Klicken an den Server sendet. Sie können den Text mithilfe des value-Attributs abrufen, auf das im vorherigen Poster hingewiesen wurde, oder mithilfe der jQuery-API:

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

Wo es oft die Textfunktion ist, die Sie verwenden (z. B. in divs usw.), ist es für den Textbereich val

erhalten:

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

einstellen:

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

Sie sollten ein div haben, das nur die Konsolennachrichten enthält, dh vorherige Befehle und deren Ausgabe. Und darunter platzieren Sie eine Eingabe oder einen Textbereich, der nur den Befehl enthält, den Sie eingeben.

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

Auf diese Weise senden Sie einfach den Wert des Eingabefelds zur Verarbeitung an den Server und hängen das Ergebnis an die Konsolennachrichten div an.

Normalerweise ist es die value-Eigenschaft

testArea.value

Oder fehlt mir etwas in dem, was du brauchst?

Ich habe herausgefunden, dass ich den keyCode des Ereignisses mithilfe der folgenden Funktion in ein Zeichen konvertieren kann:

var char = String.fromCharCode(v_code);

Von dort würde ich dann das Zeichen an eine Zeichenfolge anhängen und wenn die Eingabetaste gedrückt wird, die Zeichenfolge an den Server senden. Es tut mir leid, wenn meine Frage etwas kryptisch schien und der Titel etwas bedeutet, das fast völlig vom Thema abweicht. Es ist früh am Morgen und ich habe noch nicht gefrühstückt;).

Vielen Dank für all Ihre Hilfe.

Denkt, das Wort "Konsole" sorgt für Verwirrung.

Wenn Sie eine Voll- / Halbduplex-Konsole im alten Stil emulieren möchten, verwenden Sie Folgendes:

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

event.which hat die Taste, die gedrückt wurde. Für die Rücktastebehandlung event.which === 8.

der beste Weg: $ ('# myTextBox'). val ('neuer Wert'). trim ();

Lesen Sie den Textbereichswert und die Code-Zeichen-Konvertierung:

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>

Und unten schöne Quake wie Konsole nur auf 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>

Sie können Textbereichsdaten nach Name und ID abrufen

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