2011年11月13日 星期日

※針對 ie 和 Firefox,簡化 JavaScript 的 onKeyPress 判斷

※針對 ie Firefox,簡化 JavaScript onKeyPress 判斷
簡化的關鍵,僅在於判斷前加一行:
if (window.event) { e = event; e.which = e.keyCode; } else if (!e.which) e.which = e.keyCode;
這一行讓 ie 的判斷方式和 Firefox 一樣。

<script language='JavaScript'>

function onKeyPress_(e) {
   // 這一行讓 ie 的判斷方式和 Firefox 一樣。
   if (window.event) { e = event; e.which = e.keyCode; } else if (!e.which) e.which = e.keyCode;

   var code = e.which; // 輸入鍵的 ASCII 碼。
   var char = String.fromCharCode(e.which); // 輸入鍵字元。
   var isAlt = e.altKey; // 是否按下 Alt 鍵。
   var isCtrl = e.ctrlKey; // 是否按下 Ctrl 鍵。
   var isShift = e.shiftKey; // 是否按下 Shift 鍵。
   // ...

   if (code==13) { // 判斷輸入鍵是否為 Enter 鍵。
      //...
   }

   if (48<=code && code<=57) { // 判斷輸入鍵是否為數字 0~9
      //...
   }

   if (65<=code && code<=90) { // 判斷輸入鍵是否為大寫字母 A~Z
      //...
   }

   if (97<=code && code<=122) { // 判斷輸入鍵是否為小寫字母 a~z
      //...
   }

   switch (code) {
      case 38: //up arrow  
      case 40: //down arrow
      case 37: //left arrow
      case 39: //right arrow
      case 33: //page up  
      case 34: //page down  
      case 36: //home  
      case 35: //end                  
      case 13: //enter  
      case 9:  //tab  
      case 27: //esc  
      case 16: //shift  
      case 17: //ctrl  
      case 18: //alt  
      case 20: //caps lock
      case 8:  //backspace  
      case 46: //delete
   }

   return true;  // 按鍵合法,如果是 input 觸發的事件,字元會加入 input value 中。
   return false; // 按鍵不合法,如果是 input 觸發的事件,字元不會加入 input value 中。
}
</script>

input 控制判斷語法:
<input type=text value='' onKeyPress='return onKeyPress_(event)' />

全域控制判斷語法:
<script language='JavaScript'>
document.onkeypress = onKeyPress_; // 設定整個網頁的按鍵輸入由 onKeyPress_ 函數控制判斷。
</script>

注意,以上程式碼僅測試過 ie Firefox

參考網址
http://talk.away.com.tw/main/modules/weblog/details.php?blog_id=7

※支援IE、Firefox的鍵盤事件-按下Enter鍵,執行按鈕的Click事件

※支援IEFirefox的鍵盤事件-按下Enter,執行按鈕的Click事件
.js
function clickButton(e, buttonid) {
    var bt = document.getElementById(buttonid);
    if (typeof bt == 'object') {
        if ((e.keyCode == 13) || (e.keyCode == 13)) {  // || (e.keyCode == 13)
           bt.click();
           return false;
        }

//        if (navigator.appName.indexOf("Netscape") > (-1)) {
//            if ( (e.keyCode == 13) || (event.which == 13) ) {
//                alert("hit! 1");
//                bt.click();
//                return false;
//            }
//        }
//        if (navigator.appName.indexOf("Microsoft Internet Explorer") > (-1)) {
//            if (event.keyCode == 13) {
//                alert("hit! 2");
//                bt.click();
//                return false;
//            }
//        }

    }
}     

.aspx

<asp:TextBox ID="tbBeg" runat="server" Width="65px" TabIndex="20" ToolTip="輸入起始日期(通報日期)" MaxLength="8"></asp:TextBox>

<asp:Button ID="bQuery" runat="server" Text="查詢" style="height: 21px" TabIndex="80" ClientIDMode="Static" ToolTip="查詢" />

.aspx.cs
tbBeg.Attributes["onkeypress"] = "return clickButton(event, 'bQuery');";


參考網址
http://jsgears.com/viewthread.php?tid=238

※ 按鍵和JavaScript的Key值對應

按鍵和JavaScriptKey值對應

Key Pressed
Javascript Key Code
backspace
8
tab
9
enter
13
shift
16
ctrl
17
alt
18
pause/break
19
caps lock
20
escape
27
page up
33
page down
34
end
35
home
36
left arrow
37
up arrow
38
right arrow
39
down arrow
40
insert
45
delete
46
0
48
1
49
2
50
3
51
4
52
5
53
6
54
7
55
8
56
9
57
a
65
b
66
c
67
d
68
e
69
f
70
g
71
h
72
i
73
j
74
k
75
l
76
m
77
n
78
o
79
p
80
q
81
r
82
s
83
t
84
u
85
v
86
w
87
x
88
y
89
z
90
left window key
91
right window key
92
select key
93
numpad 0
96
numpad 1
97
numpad 2
98
numpad 3
99
numpad 4
100
numpad 5
101
numpad 6
102
numpad 7
103
numpad 8
104
numpad 9
105
multiply
106
add
107
subtract
109
decimal point
110
divide
111
f1
112
f2
113
f3
114
f4
115
f5
116
f6
117
f7
118
f8
119
f9
120
f10
121
f11
122
f12
123
num lock
144
scroll lock
145
semi-colon
186
equal sign
187
comma
188
dash
189
period
190
forward slash
191
grave accent
192
open bracket
219
back slash
220
close braket
221
single quote
222


參考網址