JQuery получить текстовый текст

javascript jquery ajax

708463 просмотра

8 ответа

4725 Репутация автора

Недавно я начал играть с jQuery и прошел несколько уроков. Теперь я чувствую себя немного компетентным с его использованием (это довольно легко), и я подумал, что было бы здорово, если бы я смог создать «консоль» на своей веб-странице (например, вы нажимаете клавишу «как» в играх FPS , и т. д.), а затем верните его на сервер Ajax, чтобы что-то делать.

Первоначально я думал, что лучшим способом было бы просто получить текст внутри текстовой области, а затем разделить его, или, если я использую событие keyup, преобразовать возвращаемый код ключа в символ ASCII, добавить символ в строку и отправить строку в сервер (затем очистите строку).

Я не смог найти никакой информации о получении текста из текстовой области, все, что я получил, это информация о ключах. Кроме того, как я могу преобразовать возвращенный код ключа в символ ASCII?

Автор: RodgerB Источник Размещён: 28.09.2008 12:05

Ответы (8)


13 плюса

50514 Репутация автора

Обычно это свойство value

testArea.value

Или мне чего-то не хватает в том, что тебе нужно?

Автор: sblundy Размещён: 28.09.2008 12:11

694 плюса

77726 Репутация автора

Решение

Почему вы хотите конвертировать нажатия клавиш в текст? Добавьте кнопку, которая отправляет текст внутри текстовой области на сервер при нажатии. Вы можете получить текст, используя атрибут value в качестве постера, на который указывал ранее, или используя API jQuery:

$('input#mybutton').click(function() {
    var text = $('textarea#mytextarea').val();
    //send to server and process response
});
Автор: Eran Galperin Размещён: 28.09.2008 12:17

8 плюса

4725 Репутация автора

Я понял, что я могу преобразовать keyCode события в символ, используя следующую функцию:

var char = String.fromCharCode(v_code);

Затем я бы добавил символ в строку, а когда нажата клавиша ввода, отправьте строку на сервер. Извините, если мой вопрос показался мне несколько загадочным, а заголовок означал что-то совершенно не по теме, сейчас раннее утро, и я еще не завтракал;).

Спасибо за вашу помощь, ребята.

Автор: RodgerB Размещён: 28.09.2008 12:34

23 плюса

4889 Репутация автора

У вас должен быть div, который просто содержит консольные сообщения, то есть предыдущие команды и их вывод. А внизу поместите ввод или текстовую область, которая просто содержит команду, которую вы вводите.

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

Таким образом, вы просто отправляете значение поля ввода на сервер для обработки и добавляете результат в сообщения консоли div.

Автор: p3drosola Размещён: 06.07.2010 03:57

7 плюса

71 Репутация автора

Метинкс слово «консоль» вызывает путаницу.

Если вы хотите эмулировать полнодуплексную консоль старого стиля, вы должны использовать что-то вроде этого:

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

событие, которое имеет клавишу, которая была нажата. Для обработки возврата назад, event.which === 8.

Автор: eric Размещён: 14.06.2011 02:45

34 плюса

1711 Репутация автора

Если вы часто используете текстовую функцию (например, в div и т. Д.), То для текстовой области это значение val.

получить:

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

установлен:

$('#myTextBox').val('new value');
Автор: Thomas Koelle Размещён: 13.06.2014 10:32

2 плюса

841 Репутация автора

лучший способ: $ ('# myTextBox'). val ('новое значение'). trim ();

Автор: Abolfazl Miadian Размещён: 25.11.2017 04:55

0 плюса

22395 Репутация автора

Прочитайте значение 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-ов :)

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>

Автор: Kamil Kiełczewski Размещён: 09.04.2019 08:55
Вопросы из категории :
32x32