web-dev-qa-db-fra.com

jQuery obtenir du texte

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 très facile), et j’ai pensé que ce serait bien si je pouvais créer une "console" sur ma page Web (comme dans le cas où vous appuyez sur la touche `comme vous le faites dans FPS jeux, etc.), puis ajaxez-le lui-même afin qu'il puisse effectuer certaines tâches.

Au départ, je pensais que le meilleur moyen serait de simplement insérer le texte dans la zone de texte, puis de le scinder, ou si je devais utiliser l'événement keyup, convertir le code clé renvoyé en un caractère ASCII, ajouter le caractère à un string et envoyez la chaîne au serveur (puis videz la chaîne).

Je ne trouvais aucune information pour obtenir du texte d'une zone de texte, tout ce que je possédais était des informations de frappe. De plus, comment puis-je convertir le code d'activation retourné en un caractère ASCII?

javascriptjqueryajax
465
RodgerB

Pourquoi voudriez-vous convertir les traits de clé en texte? Ajoutez un bouton qui envoie le texte de la zone de texte au serveur lorsque vous cliquez dessus. Vous pouvez obtenir le texte en utilisant l'attribut value tel que 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
});
689
Eran Galperin

Là où il s’agit souvent de la fonction texte que vous utilisez (par exemple, dans divs, etc.), il est alors valué.

obtenir:

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

ensemble:

$('#myTextBox').val('new value');
33
Thomas Koelle

Vous devriez avoir un div qui ne contient que les messages de la console, c'est-à-dire les commandes précédentes et leur sortie. Et mettez en dessous une entrée ou une zone de texte contenant uniquement 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 vous ajoutez le résultat au div de messages de la console.

23
p3drosola

Normalement, c'est la propriété value

testArea.value

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

13
sblundy

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

var char = String.fromCharCode(v_code);

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

Merci pour toute votre aide les gars.

8
RodgerB

Il me semble que le mot "console" cause la confusion.

Si vous souhaitez émuler une console de style ancien en duplex intégral/semi-duplex, utilisez quelque chose comme ceci:

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

event.which a la touche qui a été pressée. Pour le traitement du retour arrière, event.which === 8.

7
eric

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

1
Abolfazl Miadian

Lire la valeur textarea et la conversion de caractères:

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 ci-dessous Nice Quake like console sur div-s seulement :)

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>
0
Kamil Kiełczewski