jQuery get input value after keypress
JqueryJquery EventsJquery Problem Overview
I have the following function:
$(document).ready(function() {
$("#dSuggest").keypress(function() {
var dInput = $('input:text[name=dSuggest]').val();
console.log(dInput);
$(".dDimension:contains('" + dInput + "')").css("display","block");
});
});
For some reason, for the first keypress, I'm getting an empty string to the console log.
Jquery Solutions
Solution 1 - Jquery
Realizing that this is a rather old post, I'll provide an answer anyway as I was struggling with the same problem.
You should use the "input" event instead, and register with the .on method. This is fast - without the lag of keyup and solves the missing latest keypress problem you describe.
$('#dSuggest').on("input", function() {
var dInput = this.value;
console.log(dInput);
$(".dDimension:contains('" + dInput + "')").css("display","block");
});
Solution 2 - Jquery
This is because keypress events are fired before the new character is added to the value of the element (so the first keypress event is fired before the first character is added, while the value is still empty). You should use keyup instead, which is fired after the character has been added.
Note that, if your element #dSuggest is the same as input:text[name=dSuggest] you can simplify this code considerably (and if it isn't, having an element with a name that is the same as the id of another element is not a good idea).
$('#dSuggest').keypress(function() {
var dInput = this.value;
console.log(dInput);
$(".dDimension:contains('" + dInput + "')").css("display","block");
});
Solution 3 - Jquery
Use .keyup instead of keypress.
Also use $(this).val() or just this.value to access the current input value.
DEMO here
Info about .keypress from jQuery docs,
> The keypress event is sent to an element when the browser registers > keyboard input. This is similar to the keydown event, except in the > case of key repeats. If the user presses and holds a key, a keydown > event is triggered once, but separate keypress events are triggered > for each inserted character. In addition, modifier keys (such as > Shift) trigger keydown events but not keypress events.
Solution 4 - Jquery
I was looking for a ES6 example (so it could pass my linter) So for other people who are looking for the same:
$('#dSuggest').keyup((e) => {
console.log(e.currentTarget.value);
});
I would also use keyup because you get the current value that is filled in.
Solution 5 - Jquery
You have to interrupt the execution thread to allow the input to update.
$(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);
});
});
Solution 6 - Jquery
This is because Keypress event is fired before the new character is added. Use 'keyup' event instead,which will work perfectly in your situation.
$(document).ready(function() {
$("#dSuggest").keyup(function() {
var dInput = $('input:text[name=dSuggest]').val();
console.log(dInput);
$(".dDimension:contains('" + dInput + "')").css("display","block");
});
});
I want to add to this, if you have many textboxes and you have to do the same thing on their keyup event you can simply give them a common css class(eg commoncss) and apply keyup event like this.
$(document).ready(function() {
$(".commoncss").keyup(function() {
//your code
});
});
this will greatly reduce you code as you don't have to apply keyup event by id for each textboxes.
Solution 7 - Jquery
I think what you need is the below prototype
$(element).on('input',function(){code})
Solution 8 - Jquery
jQuery get input value after keypress
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>
Solution 9 - Jquery
Just use a timeout to make your call; the timeout will be called when the event stack is finished (i.e. after the default event is called)
$("body").on('keydown', 'input[type=tel]', function (e) {
setTimeout(() => {
formatPhone(e)
}, 0)
});
Solution 10 - Jquery
please use this code for input text
$('#search').on("input",function (e) {});
if you use .on("change",function (e) {}); then you need to blur input
if you use .on("keyup",function (e) {}); then you get value before the last character you typed