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

Question

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"); 
    }); 
}); 

Đối với một số lý do nào, cho bấm phím đầu tiên, tôi nhận được một chuỗi rỗng ra cửa sổ Console log.

Answer 1

Điều này là do keypress sự kiện được bắn trước nhân vật mới được thêm vào value của phần tử (do đó sự kiện đầu tiên keypress là bắn trước khi ký tự đầu tiên được thêm vào, trong khi value vẫn còn trống). Bạn nên sử dụng keyup thay thế, được kích hoạt sau khi ký tự đã được thêm.

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

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

Answer 2

Sử dụng .keyup thay 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ề .keypress từ tài liệu jQuery,

Sự kiện bấm phím sẽ được gửi đến một yếu tố khi trình duyệt đăng ký đầu vào bàn phím. Điều này tương tự như sự kiện keydown, ngoại trừ trong 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 keydown đượ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ợ (chẳng hạn như Shift) kích hoạt sự kiện nhấn phím nhưng không phải các sự kiện nhấn phím.

Answer 3

Bạn phải làm gián đoạn chuỗi thực hiện để 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); 
     }); 
    }); 

Answer 4

Nhận thấy đây là một bài đăng khá cũ, tôi sẽ cung cấp câu trả lời cho dù tôi đang gặp khó khăn với cùng một vấn đề.

Thay vào đó, bạn nên sử dụng sự kiện "input" và đăng ký với phương thức .on. Điều này nhanh - không có độ trễ keyup và 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 here

Answer 5

Điều này là do Keypress sự kiện là bắn 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', sự kiện này 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 đó, nếu bạn có nhiều textbox và bạn phải làm điều tương tự về sự kiện KeyUp của họ, bạn chỉ có thể cung cấp cho họ một lớp css chung (ví dụ commoncss) và áp dụng KeyUp sự kiện như thế này .

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

điều này sẽ giúp bạn giảm thiểu mã khi bạn không phải áp dụng sự kiện khóa bằng id cho mỗi hộp văn bản.

Answer 6

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

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

Answer 7

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

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

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