<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<style>
????.left?div,
????.right?div?{
????????width:?500px;
????????height:?50px;
????????padding:?5px;
????????margin:?5px;
????????float:?left;
????????border:?1px?solid?#ccc;
????}
????
????.left?div?{
????????background:?#bbffaa;
????}
????em{
????????font-weight:?900;
????????color:?red;
????}
????</style>
???<script?src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
????<h2>keydown()與keyup()事件</h2>
????<div?class="left">
????????<h4>測試一</h4>
????????<div?class="aaron">監聽keydown輸入:
????????????<input?class="target1"?type="text"?value=""?/><br?/>
????????????按下顯示輸入的值:<em></em>
????????</div>
????????<h4>測試二</h4>
????????<div?class="aaron">監聽keyup輸入:?
????????????<input?class="target2"?type="text"?value=""?/><br?/>
????????????松手顯示輸入的值:<em></em>
????????</div>
????</div>
????<script?type="text/javascript">
????//監聽鍵盤按鍵
????//獲取輸入的值
????$('.target1').keydown(function(e)?{
????????$("em:first").text(e.target.value)
????});
????//監聽鍵盤按鍵
????//獲取輸入的值
????$('.target2').keyup(function(e)?{
????????$("em:last").text(e.target.value)
????});
????</script>
</body>
</html>
2017-04-06
順序：第一次keydown ?input的值還是空 ?而此時獲取input的結果為空 ?然后值跑到input框里 ?然后keyup
第二次?keydown ?input的值為第一次輸入的字符串 ?獲取也是第一次的 ? 然后第二次輸入的跑到input框里面 ?然后keyup
以此類推
2016-11-24
樓上正解
2016-11-04
在下一節找到的答案:?
在input元素上綁定keydown事件會發現一個問題：
每次獲取的內容都是之前輸入的，當前輸入的獲取不到
keydown事件觸發在文字還沒敲進文本框，這時如果在keydown事件中輸出文本框中的文本，得到的是觸發鍵盤事件前的文本，而keyup事件觸發時整個鍵盤事件的操作已經完成，獲得的是觸發鍵盤事件后的文本