jQuery отримати текстовий текст

Нещодавно я почав грати в jQuery і переглянув пару навчальних посібників. Тепер я відчуваю себе трохи компетентним з його використанням (це досить легко), і я вважав, що було б здорово, якби мені вдалося зробити "консоль" на своїй веб-сторінці (як, наприклад, ти натискаєш клавішу `, як ти робиш в іграх FPS , і т.д.), а потім поверніть його Ajax назад на сервер для того, щоб робити речі.

Спочатку я вважав, що найкращим способом буде просто дістати текст всередині текстової області, а потім розділити його, або я повинен використовувати подію клавіатури, перетворити код, що повертається до символу ASCII, додати символ до рядка та надіслати рядок сервер (потім порожнє рядок).

Я не міг знайти жодної інформації про отримання тексту з текстової області, все, що я отримав, - це інформація про клавіатуру. Крім того, як я можу перетворити код, повернутий у символ ASCII?

Чому ви хочете перетворити ключові штрихи в текст? Додайте кнопку, яка надсилає текст всередині текстової області на сервер при натисканні на нього. Ви можете отримати текст, використовуючи атрибут значення, як попередньо вказано на плакаті, або за допомогою API jQuery:

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

Там, де часто використовується текстова функція, яку ви використовуєте (наприклад, у divs тощо), тоді для області тексту вона є val

отримати:

$('#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);

Потім я додав би символ до рядка, а після натискання клавіші введення надішліть рядок на сервер. Вибачте, якщо моє запитання здавалося дещо криптовалютним, а назва означає щось майже абсолютно поза темою, це рано вранці, і я ще не снідав;).

Дякую за всю допомогу, хлопці.

Роздуми слово "консоль" викликає плутанину.

Якщо ви хочете імітувати повну / напівдуплексну консоль у старому стилі, ви використовуєте щось подібне:

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

event.which, яку було натиснуто клавішу. Для обробки зворотного простору, 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();