Side navigation
Ticket #6319: jq142_enter.html
File jq142_enter.html, 1.4 KB (added by mikecapp, March 19, 2010 12:32PM UTC)
Reduction
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Enter problem</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<p id="version"></p>
<input id="input" type="text"/>
<p>Instructions:
<ol>
<li>Click on the page background</li>
<li>Click in the input textbox</li>
<li>Type a couple of characters</li>
<li>Hit Enter</li>
<li>Hit Enter again</li>
</ol>
</p>
<p id="enter" style="display:none; padding:4px; color:white; background-color:green;">document received ENTER keydown event</p>
<p id="change" style="display:none; padding:4px; color:white; background-color:red;">input received change event</p>
<script type="text/ecmascript">
$(function() {
$("#version").text("Using jQuery " + $(document).jquery);
$(document).keydown(function(evt) {
if (evt.keyCode == 13) $("#enter").stop().fadeIn(0).fadeOut(1000);
});
$("#input").bind("change", function(evt) {
$("#change").stop().fadeIn(0).fadeOut(1000);
//if (evt.keyCode != 13) return; // this prevents the issue
evt.stopPropagation();
});
});
</script>
</body>
</html>
Download in other formats:
Original Format
File jq142_enter.html, 1.4 KB (added by mikecapp, March 19, 2010 12:32PM UTC)
Reduction
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Enter problem</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<p id="version"></p>
<input id="input" type="text"/>
<p>Instructions:
<ol>
<li>Click on the page background</li>
<li>Click in the input textbox</li>
<li>Type a couple of characters</li>
<li>Hit Enter</li>
<li>Hit Enter again</li>
</ol>
</p>
<p id="enter" style="display:none; padding:4px; color:white; background-color:green;">document received ENTER keydown event</p>
<p id="change" style="display:none; padding:4px; color:white; background-color:red;">input received change event</p>
<script type="text/ecmascript">
$(function() {
$("#version").text("Using jQuery " + $(document).jquery);
$(document).keydown(function(evt) {
if (evt.keyCode == 13) $("#enter").stop().fadeIn(0).fadeOut(1000);
});
$("#input").bind("change", function(evt) {
$("#change").stop().fadeIn(0).fadeOut(1000);
//if (evt.keyCode != 13) return; // this prevents the issue
evt.stopPropagation();
});
});
</script>
</body>
</html>