I have an application where I want to do something when the user taps backspace (key code 8) and the value is empty. But when I try it with keyup event, I get the value after the key has been pressed and that's not what I want.
Also I don't wanna use keydown because I wanna get the current value for something else.
Basically, the GOTCHA does fire when there's no value and backspace is pressed, but it alse fires when there's a character that was just removed.
What I want is, only log GOTCHA when the previous value of the input is empty.
$(document).ready(() => {
$('input').on('keyup', e => {
// this is the condition for now, it need to be edited
const condition = !$(e.target).val().length && e.keyCode === 8;
if (condition) {
console.log('GOTCHA'); // this fires before it should be fired
}
console.log($(e.target).val().length + ', ' + e.keyCode);
});
$('input').on('keydown', e => {
console.log($(e.target).val().length + ', ' + e.keyCode);
});
});<script src=".2.1/jquery.min.js"></script>
<input type="text">
<span></span>I have an application where I want to do something when the user taps backspace (key code 8) and the value is empty. But when I try it with keyup event, I get the value after the key has been pressed and that's not what I want.
Also I don't wanna use keydown because I wanna get the current value for something else.
Basically, the GOTCHA does fire when there's no value and backspace is pressed, but it alse fires when there's a character that was just removed.
What I want is, only log GOTCHA when the previous value of the input is empty.
$(document).ready(() => {
$('input').on('keyup', e => {
// this is the condition for now, it need to be edited
const condition = !$(e.target).val().length && e.keyCode === 8;
if (condition) {
console.log('GOTCHA'); // this fires before it should be fired
}
console.log($(e.target).val().length + ', ' + e.keyCode);
});
$('input').on('keydown', e => {
console.log($(e.target).val().length + ', ' + e.keyCode);
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text">
<span></span>This is a fiddle to give you an idea of what I want to achieve https://jsfiddle/0z4cyj2e/1/
Thanks for looking into this :)
Share Improve this question edited Feb 8, 2018 at 11:13 Rory McCrossan 338k41 gold badges320 silver badges351 bronze badges asked Feb 8, 2018 at 11:06 aspiring_devaspiring_dev 932 gold badges5 silver badges12 bronze badges 7- 1 just calculate the condition in the keydown? like this – user757095 Commented Feb 8, 2018 at 11:10
-
it alse fires when there's a character that was just removed.I cannot replicate that behaviour. The code in your fiddle works as you require - it only showsGOTCHAwhen you attempt to delete with an empty field. Here's your same logic tidied up so it's clearer: jsfiddle/0z4cyj2e/2 – Rory McCrossan Commented Feb 8, 2018 at 11:10 - 2 Also note that you should post all relevant code in the question. People shouldn't have to leave SO to understand what you're asking. I've edited the question for you to include the snippet. – Rory McCrossan Commented Feb 8, 2018 at 11:12
- @CrisimIlNumenoreano I know it works the way I want it with keydown, but I need the current value in another part of that callback, so I can't use it. Thanks – aspiring_dev Commented Feb 8, 2018 at 11:14
- @RoryMcCrossan I actually just tested it and it doesn't work the way I want it. when you press backspace and there's one character in the input, it fire GOTCHA – aspiring_dev Commented Feb 8, 2018 at 11:16
1 Answer
Reset to default 6You might save the previous value in data props of the input on keydown.
$(document).ready(() => {
$('input').on('keyup', e => {
// this is the condition for now, it need to be edited
const condition = !$(e.target).data('previousValue').length && e.keyCode === 8;
if (condition) {
console.log('GOTCHA'); // this fires before it should be fired
}
console.log($(e.target).val().length + ', ' + e.keyCode);
});
$('input').on('keydown', e => {
console.log($(e.target).val().length + ', ' + e.keyCode);
$(e.target).data('previousValue', $(e.target).val());
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text">
<span></span>