jQuery 키 누르기 후 입력 값 가져오기

jQuery 키 누르기 후 입력 값 가져오기

다음과 같은 기능이 있습니다.

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

어떤 이유에서인지, 첫 번째 키 누르기 때문에 콘솔 로그에 빈 문자열이 표시됩니다.

이것이 다소 오래된 게시물이라는 것을 깨닫고, 저도 같은 문제로 어려움을 겪고 있었기 때문에 어쨌든 답변을 드리겠습니다.

다음을 사용해야 합니다."input"이벤트 대신에, 그리고 등록합니다..on방법.이는 속도가 빠릅니다.keyup그리고 당신이 설명한 최신 키 누름 문제를 해결합니다.

$('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

여기서 데모

그 이유는keypress이벤트는 새 문자가 추가되기 전에 실행됩니다.value원소의 (그러므로 첫 번째)keypress이벤트는 첫 번째 문자가 추가되기 전에 시작됩니다.value여전히 비어 있음).사용해야 합니다.keyup대신 문자가 추가된 후에 실행됩니다.

주의하세요, 만약 당신의 요소가#dSuggest와 동일합니다.input:text[name=dSuggest]당신은 이 코드를 상당히 단순화할 수 있습니다 (그리고 그렇지 않다면, 이름이 같은 요소를 가지고 있습니다).id다른 요소의 것은 좋은 생각이 아닙니다).

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

사용하다.keyup키 누르기 대신에.

또한 사용$(this).val()아니면 그냥this.value현재 입력 값에 액세스합니다.

여기서 데모

에 대한 정보.keypressjQuery 문서에서,

키 누르기 이벤트는 브라우저가 키보드 입력을 등록할 때 요소로 전송됩니다.이는 키 반복의 경우를 제외하고는 키다운 이벤트와 유사합니다.사용자가 키를 길게 누르면 키다운 이벤트가 한 번 트리거되지만 삽입된 각 문자에 대해 별도의 키 누르기 이벤트가 트리거됩니다.또한 Shift와 같은 수식어 키는 키다운 이벤트를 트리거하지만 키 누르기 이벤트는 트리거하지 않습니다.

저는 ES6의 예를 찾고 있었습니다(제 린터를 통과할 수 있도록). 그래서 같은 것을 찾는 다른 사람들을 위해:

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

현재 입력된 값을 얻을 수 있기 때문에 키업도 사용할 수 있습니다.

입력을 업데이트하려면 실행 스레드를 중단해야 합니다.

  $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });

그 이유는Keypress새 문자가 추가되기 전에 이벤트가 발생합니다.대신 '키업' 이벤트를 사용하십시오. 이 이벤트는 사용자의 상황에서 완벽하게 작동합니다.

$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

텍스트 상자가 많고 키업 이벤트에서 동일한 작업을 수행해야 하는 경우 공통 CSS 클래스(예: commoncss)를 제공하고 이와 같은 키업 이벤트를 적용할 수 있습니다.

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

이렇게 하면 각 텍스트 상자에 대해 id별 키업 이벤트를 적용할 필요가 없으므로 코드를 크게 줄일 수 있습니다.

제 생각에 당신이 필요한 것은 아래의 시제품입니다.

$(element).on('input',function(){code})

시간 초과를 사용하여 통화하십시오. 시간 초과는 이벤트 스택이 완료될 때(즉, 기본 이벤트가 호출된 후) 호출됩니다.

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});

입력 텍스트에 이 코드를 사용하십시오.

$('#search').on("input",function (e) {});

을 .on("change",function (e) {});을 흐리게 해야 .

을 .on("keyup",function (e) {});으로 입력한 이 나옵니다.

 $(document).on('keypress',((e)=>{
 console.log(e.which)
 }))

저는 JQuery Documentation(2023년 6월 7일)을 읽었고 (즉, 어느 것을) 사용했으며 누른 키의 ASCII 값을 반환했습니다.도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/8795283/jquery-get-input-value-after-keypress