I would like to know whether returning false on the keypress event is sufficient to prevent the keyup event, and whether this works for all browsers.
Consider the following code snippet:
$('#input1').keypress(function(event) {
return true;
});
$('#input1').keyup(function(event) {
var text = $(this).val();
$('#output1').val(text);
});
$('#input2').keypress(function(event) {
return false;
});
$('#input2').keyup(function(event) {
var text = $(this).val();
$('#output2').val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Test 1</h4>
Input: <input type="text" id="input1"/>
Output: <input type="text" id="output1"/>
<h4>Test 2</h4>
Input: <input type="text" id="input2"/>
Output: <input type="text" id="output2"/>
When you type into the input field for "Test 1", the corresponding output field reflects the changes. However, for "Test 2", the keypress event returns false, preventing the keyup event from occurring.
This works on Chrome, but does it work on all browsers, including IE? Is it a good way to achieve the demonstrated functionality?