jQuery nhận giá trị đầu vào sau khi nhấn phím

Tôi có chức năng sau:

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

Vì một số lý do, đối với lần nhấn phím đầu tiên, tôi nhận được một chuỗi trống vào nhật ký giao diện điều khiển.

Điều này là do keypresscác sự kiện được kích hoạt trước khi ký tự mới được thêm vào valuephần tử (vì vậy keypresssự kiện đầu tiên được kích hoạt trước khi ký tự đầu tiên được thêm vào, trong khi valuevẫn còn trống). Bạn nên sử dụng keyupthay thế, được bắn sau khi nhân vật đã được thêm vào.

Lưu ý rằng, nếu phần tử của bạn #dSuggestgiống như input:text[name=dSuggest]bạn có thể đơn giản hóa mã này một cách đáng kể (và nếu không, thì có một phần tử có tên giống với idphần tử khác không phải là ý hay).

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

Nhận ra rằng đây là một bài viết khá cũ, dù sao tôi cũng sẽ đưa ra câu trả lời vì tôi đang phải vật lộn với cùng một vấn đề.

Bạn nên sử dụng "input"sự kiện thay thế và đăng ký với .onphương thức. Điều này rất nhanh - không có độ trễ keyupvà giải quyết vấn đề nhấn phím mới nhất mà bạn mô tả.

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

Demo tại đây

Sử dụng .keyupthay vì nhấn phím.

Cũng sử dụng $(this).val()hoặc chỉ this.valueđể truy cập giá trị đầu vào hiện tại.

DEMO đây

Thông tin về .keypresstừ các tài liệu jQuery,

Sự kiện nhấn phím được gửi đến một phần tử khi trình duyệt đăng ký nhập bàn phím. Điều này tương tự như sự kiện keydown, trừ trường hợp lặp lại khóa. Nếu người dùng nhấn và giữ một phím, một sự kiện nhấn phím được kích hoạt một lần, nhưng các sự kiện nhấn phím riêng biệt được kích hoạt cho mỗi ký tự được chèn. Ngoài ra, các phím bổ trợ (như Shift) kích hoạt các sự kiện nhấn phím nhưng không phải các sự kiện nhấn phím.

Bạn phải làm gián đoạn luồng thực thi để cho phép đầu vào cập nhật.

  $(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);
       });
  });

Điều này là do Keypresssự kiện được kích hoạt trước khi nhân vật mới được thêm vào. Thay vào đó, hãy sử dụng sự kiện 'keyup', nó sẽ hoạt động hoàn hảo trong tình huống của bạn.

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

Tôi muốn thêm vào điều này, nếu bạn có nhiều hộp văn bản và bạn phải làm điều tương tự trong sự kiện keyup của họ, bạn có thể chỉ cần cung cấp cho họ một lớp css chung (ví dụ: commoncss) và áp dụng sự kiện keyup như thế này.

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

điều này sẽ giảm đáng kể mã của bạn vì bạn không phải áp dụng sự kiện keyup theo id cho mỗi hộp văn bản.

Tôi đang tìm kiếm một ví dụ ES6 (để nó có thể vượt qua người nói dối của tôi) Vì vậy, đối với những người khác đang tìm kiếm điều tương tự:

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

Tôi cũng sẽ sử dụng keyup vì bạn nhận được giá trị hiện tại được điền vào.

Chỉ cần sử dụng thời gian chờ để thực hiện cuộc gọi của bạn; thời gian chờ sẽ được gọi khi ngăn xếp sự kiện kết thúc (tức là sau khi sự kiện mặc định được gọi)

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

Tôi nghĩ những gì bạn cần là nguyên mẫu dưới đây

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

jQuery nhận giá trị đầu vào sau khi nhấn phím

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>