1
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt"><FONT size=3><SPAN lang=EN-US style="FONT-FAMILY: Wingdings; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-char-type: symbol; mso-symbol-font-family: Wingdings"><SPAN style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">Ø</SPAN></SPAN><SPAN lang=EN-US> </SPAN><SPAN style="FONT-FAMILY: 宋體; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">示例代碼（為</SPAN><SPAN lang=EN-US>IE</SPAN><SPAN style="FONT-FAMILY: 宋體; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">瀏覽器）：</SPAN></FONT></P>
2<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt"><FONT size=3><SPAN style="FONT-FAMILY: 宋體; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">說明：該示例碼在</SPAN><SPAN lang=EN-US>NetScape</SPAN><SPAN style="FONT-FAMILY: 宋體; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">或</SPAN><SPAN lang=EN-US>Oprea</SPAN><SPAN style="FONT-FAMILY: 宋體; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'">瀏覽器中可能不會很好的執行，另外，如果你了非鍵盤輸入（鼠標復制／粘貼），也不會執行。</SPAN></FONT></P>
3<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt"><SPAN lang=EN-US><o:p><FONT size=3> </FONT></o:p></SPAN></P>
4<SCRIPT language=JScript type=text/javascript>
5var isOpera = navigator.userAgent.indexOf("Opera") > -1;
6var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
7var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;
8function textboxSelect (oTextbox, iStart, iEnd) {
9 switch(arguments.length) {
10 case 1:
11 oTextbox.select();
12 break;
13 case 2:
14 iEnd = oTextbox.value.length;
15 /* falls through */
16
17 case 3:
18 if (isIE) {
19 var oRange = oTextbox.createTextRange();
20 oRange.moveStart("character", iStart);
21 oRange.moveEnd("character", -oTextbox.value.length + iEnd);
22 oRange.select();
23 } else if (isMoz){
24 oTextbox.setSelectionRange(iStart, iEnd);
25 }
26 }
27 oTextbox.focus();
28}
29/*
30function textboxReplaceSelect (oTextbox, sText) {
31 if (isIE) {
32 var oRange = oTextbox.createTextRange();
33 oRange.text = sText;
34 oRange.collapse(true);
35 oRange.select();
36 } else if (isMoz) {
37 var iStart = oTextbox.selectionStart;
38 oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
39 oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
40 }
41 oTextbox.focus();
42}
43*/
44function autocompleteMatch (sText, arrValues) {
45 for (var i=0; i < arrValues.length; i++) {
46 if (arrValues[i].indexOf(sText) == 0) {
47 return arrValues[i];
48 }
49 }
50 return null;
51}
52function autocomplete(oTextbox, oEvent, arrValues) {
53 switch (oEvent.keyCode) {
54 case 38: //up arrow
55 case 40: //down arrow
56 case 37: //left arrow
57 case 39: //right arrow
58 case 33: //page up
59 case 34: //page down
60 case 36: //home
61 case 35: //end
62 case 13: //enter
63 case 9: //tab
64 case 27: //esc
65 case 16: //shift
66 case 17: //ctrl
67 case 18: //alt
68 case 20: //caps lock
69 case 8: //backspace
70 case 46: //delete
71 return true;
72 break;
73 default:
74 // 下面這一行用處不大(被注釋)
75 //textboxReplaceSelect(oTextbox, isIE ? oTextbox.value/*oEvent.keyCode*/ : oEvent.charCode);
76 var iLen = oTextbox.value.length;
77 var sMatch = autocompleteMatch(oTextbox.value, arrValues);
78 if (sMatch != null) {
79 oTextbox.value = sMatch;
80 textboxSelect(oTextbox, iLen, oTextbox.value.length);
81 }
82
83 return false;
84 }
85}
86 </SCRIPT>
87
88
<SCRIPT>
89
var arrValues = ["Road","red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"];
90
</SCRIPT>
91
92<H2>Autocomplete Textbox Example</H2>
93<P>Type in a color in lowercase:輸入一個以小寫字母開頭的顏色(英文單詞)<BR><INPUT id=txt1 onkeyup="return autocomplete(this, event, arrValues)"></P>
posted on 2005-07-18 17:26
楚客 閱讀(814)
評論(0) 編輯 收藏 所屬分類:
HTML