jQuery get textarea text

Question

Vor kurzem habe ich angefangen, mit jQuery zu spielen, und habe ein paar Tutorials verfolgt. Jetzt fühle ich mich ein wenig kompetent, es zu benutzen (es ist ziemlich einfach), und ich dachte, es wäre cool, wenn ich in der Lage wäre, eine "Konsole" auf meiner Webseite zu machen (wie in, drücken Sie die ` Taste, wie Sie es in FPS Spiele, etc.), und dann haben es Ajax selbst zurück zum Server, um Dinge zu tun.

Ursprünglich dachte ich, der beste Weg wäre, nur den Text innerhalb der Textarea zu erhalten, und dann teilen Sie es, oder sollte ich das Keyup-Ereignis verwenden, konvertieren Sie den Keycode zurück zu einem ASCII-Zeichen, fügen Sie das Zeichen zu einer Zeichenfolge und senden Sie die Zeichenfolge an den Server (dann leeren Sie die Zeichenfolge).

Ich konnte keine Informationen über das Abrufen von Text aus einer Textarea finden, alles was ich bekam, waren Keyup-Informationen. Und wie kann ich den zurückgegebenen Keycode in ein ASCII-Zeichen umwandeln?

Answer 1

Ich glaube, das Wort "Konsole" stiftet Verwirrung.

Wenn Sie eine alte Voll-/Halbduplex-Konsole emulieren wollen, verwenden Sie etwas wie dieses:

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

event.which enthält die Taste, die gedrückt wurde. Für die Behandlung der Rücktaste ist event.which === 8.

Answer 2

Sie können Textfelddaten 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();

Answer 3

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

Answer 4

Lesen von Textarea-Werten und Umwandlung von Code-Zeichen:

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ön 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>