jQuery textarea metni edinin

Son zamanlarda jQuery ile oynamaya başladım ve birkaç dersi takip ediyorum. Şimdi onu kullanmak konusunda biraz yetkin hissediyorum (oldukça kolay) ve web sayfamda bir 'konsol' yapabilseydim iyi olacağını düşündüm (olduğu gibi, FPS oyunlarında yaptığınız gibi `tuşuna basarsanız , vb.) ve ardından bir şeyler yapmak için Ajax'ın sunucuya geri dönmesini sağlayın.

Başlangıçta en iyi yolun sadece metni metin alanının içine almak ve sonra bölmek olduğunu düşündüm ya da keyup olayını kullanmalıyım, ASCII karakterine döndürülen anahtar kodunu dönüştürmeli, karakteri bir dizeye ekleyip dizeyi göndermeliyim (daha sonra dizeyi boşaltın).

Bir metin alanından metin alma hakkında herhangi bir bilgi bulamadım, tek istediğim keyup bilgisiydi. Ayrıca, döndürülen anahtar kodunu ASCII karakterine nasıl dönüştürebilirim?

Neden tuş vuruşlarını metne dönüştürmek istersiniz? Tıklandığında metin alanının içindeki metni sunucuya gönderen bir düğme ekleyin. Metni daha önce işaret ettiği gibi value niteliğini kullanarak veya jQuery API'sını kullanarak alabilirsiniz:

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

Genellikle kullandığınız metin işlevi (örn. Div'de vb.) Olduğunda, metin alanı için val

almak:

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

Ayarlamak:

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

Yalnızca konsol iletilerini, yani önceki komutları ve çıktılarını içeren bir div öğeniz olmalıdır. Ve altına sadece yazdığınız komutu tutan bir girdi veya metin alanı koyun.

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

Bu şekilde, giriş kutusunun değerini işlemek için sunucuya gönderir ve sonucu konsol mesajları div öğesine eklersiniz.

Normalde, değer özelliği

testArea.value

Yoksa ihtiyacın olan şeyde eksik olduğum bir şey var mı?

Ben aşağıdaki işlevi kullanarak olayın keyCode bir karaktere dönüştürebilir anladım:

var char = String.fromCharCode(v_code);

Oradan karakteri bir dizeye eklerdim ve enter tuşuna basıldığında dizeyi sunucuya gönderirim. Sorum biraz şifreli görünüyordu ve neredeyse tamamen konu dışı bir şey anlamına geliyor, üzgünüm sabah erken ve henüz kahvaltı henüz;).

Tüm yardımlarınız için teşekkürler çocuklar.

Methinks "konsol" kelimesi karışıklığa neden oluyor.

Eski tarz bir tam / yarı çift yönlü konsol taklit etmek istiyorsanız, şöyle bir şey kullanırsınız:

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

event.which tuşuna basıldı. Geri silme işlemi için event.which === 8.

en iyi yol: $ ('# myTextBox'). val ('yeni değer'). trim ();

Metin alanı değerini ve kod-char dönüşümünü okuyun:

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>

Ve sadece div-s üzerinde güzel Quake gibi konsol :)

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>

ad ve kimliğe göre textarea verileri alabilirsiniz

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