jQuery get textarea text

Récemment, j'ai commencé à jouer avec jQuery et j'ai suivi quelques tutoriels. Maintenant, je me sens un peu compétent pour l'utiliser (c'est assez facile), et je pensais que ce serait cool si je pouvais créer une `` console '' sur ma page Web (comme dans, vous appuyez sur la touche `comme vous le faites dans les jeux FPS , etc.), puis faites-le Ajax lui-même sur le serveur afin de faire des choses.

Au départ, je pensais que le meilleur moyen serait de simplement placer le texte dans la zone de texte, puis de le diviser, ou devrais-je utiliser l'événement keyup, convertir le code clé renvoyé en caractère ASCII, ajouter le caractère à une chaîne et envoyer la chaîne à le serveur (puis videz la chaîne).

Je n'ai trouvé aucune information sur l'obtention de texte à partir d'une zone de texte, tout ce que j'ai obtenu, ce sont des informations de saisie. De plus, comment puis-je convertir le code clé renvoyé en caractère ASCII?

Pourquoi voudriez-vous convertir des traits de touche en texte? Ajoutez un bouton qui envoie le texte à l'intérieur de la zone de texte au serveur lorsque vous cliquez dessus. Vous pouvez obtenir le texte en utilisant l'attribut value comme l'a souligné l'affiche avant, ou en utilisant l'API de jQuery:

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

Là où c'est souvent la fonction de texte que vous utilisez (par exemple dans les divs, etc.), alors pour la zone de texte

avoir:

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

ensemble:

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

Vous devriez avoir un div qui contient juste les messages de la console, c'est-à-dire les commandes précédentes et leur sortie. Et en dessous, mettez une entrée ou une zone de texte qui contient simplement la commande que vous tapez.

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

De cette façon, vous envoyez simplement la valeur de la zone de saisie au serveur pour traitement et ajoutez le résultat à la div des messages de la console.

Normalement, c'est la propriété value

testArea.value

Ou y a-t-il quelque chose qui me manque dans ce dont vous avez besoin?

J'ai compris que je pouvais convertir le keyCode de l'événement en personnage en utilisant la fonction suivante:

var char = String.fromCharCode(v_code);

À partir de là, j'ajouterais ensuite le caractère à une chaîne, et lorsque la touche Entrée est enfoncée, j'enverrai la chaîne au serveur. Je suis désolé si ma question semblait quelque peu énigmatique et que le titre signifie quelque chose de presque complètement hors sujet, c'est tôt le matin et je n'ai pas encore déjeuné;).

Merci pour toute votre aide les gars.

Il me semble que le mot "console" est à l'origine de la confusion.

Si vous souhaitez émuler une console full / half duplex à l'ancienne, vous utiliseriez quelque chose comme ceci:

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

event.which a la touche qui a été enfoncée. Pour la gestion du retour arrière, event.which === 8.

la meilleure façon: $ ('# myTextBox'). val ('new value'). trim ();

Lire la valeur de la zone de texte et la conversion du code:

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>

Et en dessous de la belle console Quake comme sur div-s uniquement :)

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>

vous pouvez obtenir des données de zone de texte par nom et identifiant

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