자바 스크립트/jquery에서 지연, 안드로이드 스타일의 비밀번호 입력 마스킹

Question

내 작업이 완료되었다고 말하면서 시작하겠습니다. 하지만 어떻게 작동하는지 이해하려고 노력 중입니다. 한 가지는 혼란 스럽습니다. 즉, 우연히 답을 찾지 못했습니다.

내 작업은 간단했습니다. 입력 상자에서 지연 후 각 문자를 *로 변경하여 사용자가 입력 한대로 입력을 마스크하십시오. 이것은 안드로이드 폰이 아이폰과 약간 다른 마스킹 된 입력을 처리하는 방법입니다.

저는 jQuery/javascript와 regex를 조합하여 사용했습니다. 내 작업 코드 :

$('.room_input').focus(function() { 
    currentFocus = $(this); 
}); 

$('.key').click(function() { 
    setTimeout(function() { 
     currentFocus.val(currentFocus.val().replace(/[^\*]/, '*')); 
    }, 2000); 
}); 

아주 간단하고 잘 작동합니다. 각 키를 누르면 2 초 후 *로 바뀝니다. 각 키는 자체 타이머에 있습니다. 그러나 내가 이해하지 못하는 중요한 것이 하나 있습니다. setTimeout에서 콜백이 발생하면 위의 코드는 전체 내용을 텍스트 상자에 *로 설정하는 것처럼 보입니다. 위의 "바꾸기"는 값의 전체 내용을 *가 아닌 문자로 바꿉니다.

하지만 그렇지 않습니다. 클릭 할 때부터 2 초 후에 각 키가 변경됩니다 (필요한 경우). 왜 그럴까요? 나는 그것이 정규식일지도 모른다고 생각하고있다 - 그것이 발견 한 첫 번째 매치만을 변경 하는가? 나는 내 자신의 질문에 그냥 대답 했습니까?

업데이트 : 예. 그것은 정규식입니다. 문자열에서 일치하는 문자 인 을 첫 번째으로 바꿉니다. 나는 아마 싱글 스레딩 문제와 관련이 있다고 생각하고 있었다. 평소와 같이, 나는 그것보다 훨씬 어려운 문제를 만들고있다. :)

Answer 1

네 말이 맞아.

모든 키 클릭은 문자를 추가 한 다음 나중에 별표가 아닌 첫 번째 별표를 별표로 변환하는 타이머를 시작합니다. 기대했던 것보다 훨씬 간단합니다.