jQuery는 텍스트를 얻는다

최근에 jQuery로 게임을 시작했으며 몇 가지 튜토리얼을 따르고 있습니다. 이제 나는 그것을 사용하는 것에 약간의 유능함을 느낍니다 (꽤 쉽습니다). 내 웹 페이지에서 '콘솔'을 만들 수 있다면 멋지다고 생각했습니다 ( FPS 게임 에서와 같이 '키를 누르십시오 . 그런 다음 Ajax 자체를 서버에 다시 가져 와서 작업하십시오.

나는 원래 가장 좋은 방법은 텍스트 영역 안에 텍스트를 가져 와서 나누거나 키 업 이벤트를 사용해야하는 경우 ASCII 문자로 반환 된 키 코드를 변환하고 문자를 문자열에 추가하고 문자열을 보내는 것입니다 서버 (문자열을 비 웁니다).

텍스트 영역에서 텍스트를 가져 오는 방법에 대한 정보를 찾을 수 없었습니다. 키업 정보 만 있으면됩니다. 또한 반환 된 키 코드를 ASCII 문자로 변환하는 방법은 무엇입니까?

키 스트로크를 텍스트로 변환하려는 이유는 무엇입니까? 클릭하면 텍스트 영역 안의 텍스트를 서버로 보내는 버튼을 추가하십시오. 포스터가 지적한대로 value 속성을 사용하거나 jQuery의 API를 사용하여 텍스트를 가져올 수 있습니다.

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

자주 사용하는 텍스트 기능 (예 : div 등) 인 경우 텍스트 영역의 경우 val입니다

가져 오기:

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

세트:

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

콘솔 메시지, 즉 이전 명령 및 해당 출력 만 포함하는 div가 있어야합니다. 그리고 그 아래에는 입력하는 명령 만 보유하는 입력 또는 텍스트 영역을 넣으십시오.

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

이렇게하면 처리를 위해 입력 상자의 값을 서버로 보내고 결과를 콘솔 메시지 div에 추가합니다.

일반적으로 value 속성입니다.

testArea.value

아니면 내가 필요한 것에 빠진 것이 있습니까?

다음 함수를 사용하여 이벤트의 keyCode를 문자로 변환 할 수 있다는 것을 알았습니다.

var char = String.fromCharCode(v_code);

그런 다음 문자를 문자열에 추가하고 Enter 키를 누르면 문자열을 서버로 보냅니다. 내 질문이 다소 비밀스러워 보였고 제목이 거의 완전히 주제가 아닌 것을 의미하는 경우 미안합니다. 아침이 빠르고 아직 아침을 먹지 않았습니다.).

모든 도움을 주셔서 감사합니다.

"콘솔"이라는 단어가 혼란을 야기합니다.

이전 스타일의 전이중 / 반이중 콘솔을 에뮬레이트하려면 다음과 같이 사용하십시오.

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

눌린 키가있는 event. 백 스페이스 처리의 경우 event.which === 8.

가장 좋은 방법 : $ ( '# myTextBox'). val ( 'new value'). trim ();

텍스트 영역 값 및 코드 문자 변환을 읽으십시오.

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>

그리고 div-s에서만 콘솔 과 같은 멋진 Quake 아래 :)

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>

이름과 ID로 텍스트 영역 데이터를 얻을 수 있습니다

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