2012-12-25 8 views
0

jquery와 ajax를 사용하여 MS-DOS 에뮬레이션 창을 만들려고합니다. 잘 작동하지만 단어를 입력하거나 Enter 키를 누르면 스크립트가 너무 늦게 표시됩니다 (첫 번째 키를 눌렀을 때 문자가 표시되지 않고 각 다음 keydown에 대해 현재 문자 대신 사용자가 입력 한 이전 문자가 표시됨). 하나). 그것이 내가이Keydown이 현재 문자 대신 이전 문자를 처리합니다.

$("#instruct").html(request+'x'); 
에이

$("#instruct").html(request); 

을 변경해야하는 경우 때문에 때

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/terminal.css"> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() 
      {  
       //set cursor position 
       $('#cursor').css('left','0px'); 

       //focus on textfield 
       $('#field').focus(); 

       //On key down... 
       $('#field').keydown(function(event) 
       { 
        request=$(this).val(); 
        count=$(this).val().length; 

        //Display chars as they come 
        $("#instruct").html(request); 

        // If "enter" is pressed 
        if (event.which == 13) 
        { 
         event.preventDefault(); 

         //clean user entry 
         request=request.replace(/\n/g, ""); 

         // Process user entry 
         $.ajax({ 
           type: "POST", 
           url: "scripts/ajax/terminal.php", 
           data: {command:request}, 
           success: function(response) 
           { 
           // if user typed something before pressing "enter" 
           if(response !='') 
           { 
            // update list by logging the previous entry, showing system response and clearing the textarea 
            $('#log').append("<li class='user'>--- &gt;<span>"+request+"</span></li>"); 
            $('#log').append("<li class='sys' >SYS &gt;<span>"+response+"</span></li>"); 
            $('#field').val(''); 
           } 
           } 
         }); 
        } 
       });    
      }); 
     </script> 
    </head> 

    <body> 
     <ul id="log"> 
      <li class='sys'>Sys &gt;<span>Identification required</span></li> 
     </ul> 

     <ul id="realtime"> 
      <li id="live-space"> 
       <span class="user-line">--- &gt;</span> 
       <textarea type="text" id="field"></textarea> 
       <div> 
        <span id="instruct"></span><div id="cursor">_</div> 
       </div> 
      </li> 
     </ul> 
    </body> 
</html> 

내가 "를 keyDown"확신 해고 : 여기

내 스크립트의 단순화 된 버전입니다

... "요청"콘텐츠가 지연되는 동안 첫 번째 키 입력 직후에 "x"가 표시됩니다. 다음 keydown (예를 들어, "a"를 입력하면 "x"가 표시되고 immediatly 후에 "b"를 입력하면 "ax"등이 표시됨).

그렇다면 keydown을 실행하는 것이 아니라 적절한 시간에 적절한 문자를 선택하는 것입니다.

내가 뭘 잘못 했니?

감사합니다.

+0

'keyup '이 작동합니까? –

+0

나는 keydown, keypress 및 keyup을 시도했다. 각자 혼자 (그들은 같은 이슈를 공유합니다) 또는 그 두 가지를 함께 조합하십시오. 그 중 세 명을 사용하여 같은 기능을 발휘한다면 나는 거의 옳았습니다.하지만 커서를 움직이는 것과 같은 다른 종소리와 휘파람이 미쳐 가고 있습니다 (화살표 키를 누를 때마다 커서가 한 번이 아니라 3 번 움직입니다). 문제는 keyDown에서만 작동한다는 것입니다. – Baylock

+1

@Baylock : 그렇게해서는 안되며, 왜 내 대답에 묘사되어 있습니다. 당신은 너무 일찍입니다. – Amadan

답변

2

타이밍에 관한 것입니다. keydown 이벤트가 발생하면 컨트롤이 아직 캐릭터를받지 못했습니다. 실제로 수신할지 여부는 확실하지 않습니다 (keydown 또는 keypress을 차단할 수 있고 이후에만 추가됩니다). 그래서 당신이 컨트롤의 내용을 읽을 때, 너무 일찍 그것을하고 있습니다 - 당신이 가서 돈을 지불 한 후에 맥도날드에 가기로 결정했을 때 햄버거를 먹는 것과 같습니다.

키보드 이벤트 here에 대한 자세한 내용과 spec here에 대한 자세한 내용을 읽을 수 있습니다.

해결책 : 이것은 keydown을위한 것이 아닙니다. change 이벤트가 더 잘 작동하는지 확인해보십시오. 편집 : 의미 그들은 change 이벤트와 함께 문자를 잡으려고. 당신이하고 있던대로 Enter 키를 keydown으로 잡아라.

+0

입력 해 주셔서 감사합니다. 그게 내가 염두에 두었던 것이지만, 이것이 작동하도록하는 해결책이 될 것인가? TYVM – Baylock

+0

나는이 문제에 대한 설명을 쓰고 있다고 생각한다. 스크립트의 작은 버전을 떨어 뜨렸다면 이론적 인 문제인지 확신 할 수 없었기 때문입니다. 그것은 내 자바 스크립트 지시에 논리의 부족되었을 수 있습니다. – Baylock

+1

Aaaaand 읽을 수 없습니다. 미안, 내가 생각했던 것보다 늦었을거야. 사과. – Amadan

3

Working demo 당신이 그것을 잡을 단지 누른 키의 문자를 추가,하지만 당신은 그렇게 사용 keydown를 사용하는 경우 대문자 문자를 String.fromCharCode(event.which) 반환하기 전에 필드의 값이 업데이트되지 않는

keypress

$('#field').on('keypress',function(event){ 
    request=$(this).val() + String.fromCharCode(event.which); 
    ... 

하거나 사용할 수

$('#field').on('keyup',function(event){ 
    request=$(this).val(); // value is ready by now 
    ... 

키가 공개되기를 기다리고 있기 때문에 피드백이 느리게 나타납니다

+0

이것은 거의 괜찮습니다. 고마워요! 마지막 문제 하나 : 현재 문자는 대문자입니다. 새 문자를 입력하면 이전 문자는 소문자가됩니다 (새 문자는 대문자입니다 ...) – Baylock

+1

대신 keypress를 사용하십시오. 답변 업데이트 – Popnoodles

+0

키 누르기로 거의 완벽합니다 (키 입력은 실시간 타이핑에 충분히 반응하지 않습니다). 대문자 문제가 더 이상 발생하지 않고 문자가 예상대로 작동하지만 sys 응답을 보려면 "입력"을 두 번 눌러야합니다. 나는 "fromcharcode"가 줄 바꿈을 고려하지 않는다고 믿는다. 그렇지? – Baylock

관련 문제