[jquery] jQuery는 키를 누른 후 입력 값을 얻습니다.

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

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

어떤 이유로 든 첫 번째 키 누르기 때문에 콘솔 로그에 빈 문자열이 나타납니다.

답변

이는 새 문자가 요소에 추가 되기 전에keypress 이벤트 가 시작되기 때문입니다 (따라서 첫 번째 문자가 추가되기 전에 첫 번째 이벤트가 시작되고 여전히 비어 있음). 대신 캐릭터를 추가 한 후에 시작 되는 대신 사용해야합니다 .valuekeypressvaluekeyup

요소 #dSuggest가 동일 input:text[name=dSuggest]하면이 코드를 상당히 단순화 할 수 있습니다 (그렇지 않은 경우 다른 요소와 이름이 같은 id요소를 갖는 것은 좋지 않습니다).

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    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");
});

여기 데모

답변

.keyup키 누르기 대신 사용하십시오 .

$(this).val()또는 this.value현재 입력 값에 액세스하기 위해 또는 사용하십시오 .

여기 데모

.keypressjQuery 문서 에 대한 정보 ,

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

답변

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

  $(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새 캐릭터가 추가되기 전에 이벤트가 시작되기 때문 입니다. 대신 ‘keyup’이벤트를 사용하면 상황에 완벽하게 작동합니다.

$(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별로 키업 이벤트를 적용 할 필요가 없으므로 코드가 크게 줄어 듭니다.

답변

나는 ES6 예제를 찾고 있었고 (그래서 내 린터를 전달할 수있다) 그래서 같은 것을 찾는 다른 사람들을 위해 :

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

채워진 현재 값을 얻으므로 keyup도 사용합니다.

답변

타임 아웃을 사용하여 전화하십시오. 이벤트 스택이 완료되면 (즉, 기본 이벤트가 호출 된 후) 타임 아웃이 호출됩니다.

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