站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题用Javascript制作一个可自动填写的文本框(全文完)

用Javascript制作一个可自动填写的文本框(全文完)

摘要: 用Javascript制作一个可自动填写的文本框(全文完)


<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处http://xinyistudio.vicp.net/和作者信息及本声明

Ø 对autocomplete()的补充

对autocomplete() 方法补充一下,我们先到可自动完成的文本框标记中看一下(译者注:<input type=text>),autocomplete()方法将给出三个参数:作用于的文本框的对象oTextbox对象,event(事件)对象。调用方法如下:

<input type=”text” onkeyup=”return autocomplete(this, event, arrValues)” />

考虑到在文本框中触发onkeypress事件(译者更正:应该使用onkeyup事件,以保证字符已被输入)的第一个键的键码:

function autocomplete(oTextbox, oEvent, arrValues) {

switch (oEvent.keyCode) {

...
}
}

有许多按键需要被屏蔽,如光标键,只需要在下面指定的case语句中返回true

function autocomplete(oTextbox, oEvent, arrValues) {

switch (oEvent.keyCode) {
case 38: // á
case 40: //
â
case 37: //
ß
case 39: //
à
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: //
退格键
case 46: // Delete

return true;
break;
...

}
}

默认的case语句:当用户键入一个字符。

在这个case语句中需要完成以下几个步骤:

1. 用键入的字符替换已选择的文本。(译者注:这一步似乎并没有必要)

2. 键入文本时试着得到一个匹配的文本。

3. 如果找到,为文本框建议一个应该输入的文本,并选择这些用户无需键入的匹配文本。

这个步骤最重要的是确定用户键入的字符(由event对象的keyCode属性(IE)或charCode属性(Mozilla)得到键码,并使用String.fromCharCode () 方法将键码转为字符,用这字符替换当前选择的文本,然后我们需要得到文本框中文本的长度。

function autocomplete(oTextbox, oEvent, arrValues) {

switch (oEvent.keyCode) {
case 38: // á
case 40: // â
case 37: // ß
case 39: // à
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: // 退格键
case 46: // Delete
return true;
break;


default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode); //
译者注:这一步似乎并无必要,因此在文章结束的示例代码中将这一行去掉
var iLen = oTextbox.value.length;
...

}
}

下面用autocompleteMatch() 方法在数组中查找一个相匹配的值:

function autocomplete(oTextbox, oEvent, arrValues) {

switch (oEvent.keyCode) {
case 38: // á
case 40: // â
case 37: // ß
case 39: // à
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: // 退格键
case 46: // Delete
break;

default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;

var sMatch = autocompleteMatch(oTextbox.value, arrValues);

...
}
}

在请求得到一个匹配值后,我们需要确定如果这个匹配值确实已经找到。测试一下sMatch值,如果它不是null,则需要用sMatch来替换文本框中的文本。然后我们使用iLen(由用户键入的实际文本长度)来作为textboxSelect () 方法的输入参数,以选择那些已被匹配的文本(sMatch)。

function autocomplete(oTextbox, oEvent, arrValues) {

switch (oEvent.keyCode) {
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;
break;

default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;

var sMatch = autocompleteMatch(oTextbox.value, arrValues);

if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}


...
}
}

做完这些事后,我们必须在处理方法的最后加上return false,否则,输入的字符会出现两次。

=====================================================================

Ø 示例代码(为IE浏览器):

说明:该示例码在NetScape或Oprea浏览器中可能不会很好的执行,另外,如果你了非键盘输入(鼠标复制/粘贴),也不会执行。

<script language=JScript type=text/javascript> var isOpera = navigator.userAgent.indexOf("Opera") > -1; var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera; var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera; function textboxSelect (oTextbox, iStart, iEnd) { switch(arguments.length) { case 1: oTextbox.select(); break; case 2: iEnd = oTextbox.value.length; /* falls through */ case 3: if (isIE) { var oRange = oTextbox.createTextRange(); oRange.moveStart("character", iStart); oRange.moveEnd("character", -oTextbox.value.length + iEnd); oRange.select(); } else if (isMoz){ oTextbox.setSelectionRange(iStart, iEnd); } } oTextbox.focus(); } /* function textboxReplaceSelect (oTextbox, sText) { if (isIE) { var oRange = oTextbox.createTextRange(); oRange.text = sText; oRange.collapse(true); oRange.select(); } else if (isMoz) { var iStart = oTextbox.selectionStart; oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length); oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length); } oTextbox.focus(); } */ function autocompleteMatch (sText, arrValues) { for (var i=0; i < arrValues.length; i++) { if (arrValues[i].indexOf(sText) == 0) { return arrValues[i]; } } return null; } function autocomplete(oTextbox, oEvent, arrValues) { switch (oEvent.keyCode) { 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; break; default: // 下面这一行用处不大(被注释) //textboxReplaceSelect(oTextbox, isIE ? oTextbox.value/*oEvent.keyCode*/ : oEvent.charCode); var iLen = oTextbox.value.length; var sMatch = autocompleteMatch(oTextbox.value, arrValues); if (sMatch != null) { oTextbox.value = sMatch; textboxSelect(oTextbox, iLen, oTextbox.value.length); } return false; } } </script> <script> var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"]; </script>

Autocomplete Textbox Example

Type in a color in lowercase:输入一个以小写字母开头的颜色(英文单词)
<input id=txt1 onkeyup="return autocomplete(this, event, arrValues)">

(一) (二) (三)

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 用Javascript制作一个可自动填写的文本框(二)
后一篇: JavaScript对象与数组参考大全