jQuery รับข้อความ textarea

เมื่อเร็ว ๆ นี้ฉันเริ่มเล่นกับ jQuery และติดตามบทเรียนสองสามอย่าง ตอนนี้ฉันรู้สึกมีความสามารถเล็กน้อยเมื่อใช้มัน (มันค่อนข้างง่าย) และฉันคิดว่ามันจะเจ๋งถ้าฉันสามารถสร้าง 'คอนโซล' บนเว็บเพจของฉันได้ (เช่นเดียวกับคุณกดปุ่ม `เหมือนกับที่คุณทำในเกมFPSฯลฯ ) จากนั้นให้ Ajax กลับไปที่เซิร์ฟเวอร์เพื่อทำสิ่งต่างๆ

ตอนแรกฉันคิดว่าวิธีที่ดีที่สุดคือการได้รับข้อความภายใน textarea แล้วแยกมันหรือฉันควรใช้เหตุการณ์ keyup, แปลง keycode ที่ส่งคืนเป็นอักขระ ASCII ต่อท้ายอักขระเป็นสตริงและส่งสตริงไป เซิร์ฟเวอร์ (จากนั้นล้างสตริง)

ฉันไม่พบข้อมูลใด ๆ เกี่ยวกับการรับข้อความจาก textarea สิ่งที่ฉันได้รับคือข้อมูลคีย์อัพ นอกจากนี้ฉันจะแปลงรหัสคีย์ที่ส่งคืนเป็นอักขระ ASCII ได้อย่างไร

ทำไมคุณต้องการแปลงลายเส้นสำคัญเป็นข้อความ? เพิ่มปุ่มที่ส่งข้อความภายใน textarea ไปยังเซิร์ฟเวอร์เมื่อคลิก คุณสามารถรับข้อความโดยใช้แอตทริบิวต์ value เป็นโปสเตอร์ก่อนที่จะชี้ให้เห็นหรือใช้ API ของ jQuery:

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

ที่ซึ่งมักจะเป็นฟังก์ชั่นข้อความที่คุณใช้ (เช่นใน divs ฯลฯ ) จากนั้นสำหรับพื้นที่ข้อความมันเป็นวาล

จะได้รับ:

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

ตั้ง:

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

คุณควรมี div ที่เพิ่งมีข้อความคอนโซลนั่นคือคำสั่งก่อนหน้าและผลลัพธ์ของมัน และด้านล่างให้ใส่ข้อความหรือข้อความที่เพิ่งเก็บคำสั่งที่คุณพิมพ์

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

ด้วยวิธีนี้คุณเพียงแค่ส่งค่าของกล่องอินพุตไปยังเซิร์ฟเวอร์เพื่อประมวลผลและผนวกผลลัพธ์ไปที่ div ข้อความคอนโซล

โดยปกติมันเป็นคุณสมบัติที่คุ้มค่า

testArea.value

หรือมีบางอย่างที่ฉันขาดไปในสิ่งที่คุณต้องการ?

ฉันพบว่าฉันสามารถแปลง keyCode ของเหตุการณ์เป็นตัวละครโดยใช้ฟังก์ชั่นต่อไปนี้:

var char = String.fromCharCode(v_code);

จากนั้นฉันก็จะผนวกอักขระไปยังสตริงและเมื่อกดปุ่ม Enter ส่งสตริงไปยังเซิร์ฟเวอร์ ฉันขอโทษถ้าคำถามของฉันดูค่อนข้างคลุมเครือและชื่อมีความหมายอะไรบางอย่างที่เกือบจะไม่สมบูรณ์มันเป็นตอนเช้าตรู่และฉันยังไม่ได้ทานอาหารเช้า;)

ขอบคุณสำหรับความช่วยเหลือทั้งหมดของคุณ

คิดคำว่า "คอนโซล" ทำให้เกิดความสับสน

หากคุณต้องการเลียนแบบเพล็กซ์เต็มรูปแบบ / ครึ่งเพล็กซ์คอนโซลคุณจะต้องใช้สิ่งนี้:

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

เหตุการณ์ที่มีรหัสที่ถูกกด สำหรับการจัดการแบ็คสเปซ event.which === 8

วิธีที่ดีที่สุด: $ ('# myTextBox'). val ('ค่าใหม่'). trim ();

อ่านค่า textarea และการแปลงรหัสถ่าน:

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>

และด้านล่างQuake ที่ดีเช่นคอนโซลบน 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>

คุณสามารถรับข้อมูล textarea ตามชื่อและรหัส

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