jQuery : 키 입력시 입력 값이 손실 되었습니까?

Question

사용자가 입력 필드에서 Enter (return) 키를 누르면 간단한 양식 (예 : 화재 아약스)을 제출하고 싶습니다. 제출 버튼을 누르면 이벤트가 정상적으로 발생하지만 keyup을 사용하여 똑같은 기능을 실행하면 입력 필드의 값이 비어 있습니다. $ (this) .val()을 사용하여 입력 필드 (keyup 함수의 값)를 전달하려고 시도했지만 전달 된 매개 변수는 여전히 비어 있습니다.

업데이트 II : 초기로드시에만 문제가 발생합니다. 새로 고침을 한 후 이벤트가 의도 한대로 실행됩니다. Chrome 및 FF에서 테스트되었습니다.

http://jsfiddle.net/R5QsC/1/

// Value of #pin is blank in getKeyAjax() 
$('#pin').keyup(function(e) { 
    if (e.keyCode == 13) { 
     console.log('DEBUG: Keypress detected (13)') 
     getKeyAjax(); 
    } 
}); 
// Value of #pin is correct in getKeyAjax() 
$('#btnPwdCreate').click(function() { 
    getKeyAjax(); 
}); 

function getKeyAjax() { 
    console.log('DEBUG: Starting ... getKeyAjax()'); 
    var txtPin = $('#pin').val(); 
    console.log('DEBUG: Value of txtPin: ' + txtPin); 
    . 
    . 
    . 
} 

Answer 1

나는이 원인이 될 수있는 당신의 바이올린 한 가지에 나타났습니다. 양식 필드를 사용함에있어서 나는 때로는 '4 자리 숫자 만'이라는 경고를 받았으며 대개는 그렇지 않았 음을 알았습니다. 문제는 form 태그입니다. Enter를 누르면 브라우저의 기본 동작이 트리거됩니다. 비 아약스 양식 제출. $.GET이 실행되기 전에 이것이 완료되면 js가 캐시 된 다음 새로 고침 후 설명 된 동작과 일치하게됩니다. 그러면 제출 및 새로 고침이 발생하기 직전에 $ .get을 허용하여 더 빨리 평가할 수 있습니다. 그 이론에 불과하지만 궁극적으로 두 가지 옵션을 남겨 둡니다.

1. html에서 <form> 태그를 제거하십시오. 그렇게 할 <form>이 없기 때문에

1 #

$('form').on('submit', function(e){e.preventDefault();});

없이 기본을 제출의 영향을 미칠 것입니다. 2 #는 onsubmit 이벤트를 대체하여 기본 제출 (양식 태그 보관 유지)을 방지합니다.

문제가 해결되었는지 여부에 관계없이 상관없이 스크립트에 필요합니다. 그것은 아약스를 수행하는 열쇠가 될 양식을 입력 안으로 입력 타격. 위의

http://jsfiddle.net/9TYhT/

바이올린. 행동은 이제 일관 적입니다.

Answer 2

하면이 시도 :

$(document).ready(function(){ // make sure DOM is ready to be manipulated 
    // ... 

    $('#pin').keyup(function(e) { 
     if (e.which == 13) { 
      getKeyAjax(); 
      e.preventDefault() // prevents form from being submitted 
     } 
    }); 

    // ... 
})