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

原创 2004年02月07日 22:54:00

版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处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浏览器):

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

 

Autocomplete Textbox Example

Type in a color in lowercase:输入一个以小写字母开头的颜色(英文单词)

(一)  (二) (三)

用Html+Js实现的“自动补全”功能

正文:       这几天,帮同学解决一个问题,虽然他的问题还没有完全解决,但在解决问题的过程中我做了这个“自动补全”的功能。虽然这个补全的功能在网上也有很多代码,但是在我写代码和学习的过程中,...
  • qq_27376871
  • qq_27376871
  • 2016年06月26日 13:20
  • 3900

解决 input密码框自动填充

火狐上input密码框自动填充值的有关问题 By wangzhehui   at 2014-06-07   117 阅读   0 回复   0.0 希赛币 请点击下面回答中的"采...
  • h183288132
  • h183288132
  • 2015年06月12日 19:33
  • 6163

用程序来控制一个网页,实现自动输入等操作

首先今天要说的东西跟游戏无关,你是不是有时候会遇到,在某个网页上重复着几十次的简单而又无聊的录入或点击等工作?比如你的程序需要测试,需要注册大量的测试邮箱。比如你的老板是个变态,让你去各个论坛发大量的...
  • lufy_Legend
  • lufy_Legend
  • 2014年05月07日 10:55
  • 101338

《我俩不是朋友》——亦舒最新长篇小说(全文完)

(一)    一早,母亲的电话来找,二房东豆泥大声叫:“你妈找。”    午牛惺忪起床,地线电话在公用客厅,他套上卡其裤出去,“妈,你早。”    “大牛,汇款收到,两个弟弟十分感激,下...
  • u011549143
  • u011549143
  • 2013年08月01日 21:06
  • 1160

小波变换网文精粹:小波变换教程(二十四)(全文完)

小波变换网文精粹:小波变换教程(二十四)(全文完) 原文:ROBI POLIKAR. THE ENGINEER'S ULTIMATE GUIDE TO WAVELET ANALYSIS:The Wa...
  • deepdsp
  • deepdsp
  • 2012年02月18日 23:31
  • 2840

敏捷测试理论以及实践 - 7(全文完)

转自: http://blog.csdn.net/softerwarer/article/details/6919820 【本篇是《敏捷测试理论以及实践》第七篇,(第一篇,第二篇,第...
  • justheretobe
  • justheretobe
  • 2017年06月22日 14:44
  • 314

【全文完】【Deep C (and C++)】深入理解C/C++(4)

转自:http://blog.csdn.net/rockics/article/details/7037843 译自Deep C (and C++) by Olve Maudal and J...
  • smsmn
  • smsmn
  • 2013年11月07日 10:19
  • 760

【全文完】【Deep C (and C++)】深入理解C/C++(4)

译自Deep C (and C++) by Olve Maudal and Jon Jagger,本身半桶水不到,如果哪位网友发现有错,留言指出吧:)   总结一下第三讲,我们可以知道,相对于第一...
  • Rockics
  • Rockics
  • 2011年12月03日 18:04
  • 3616

如何有效实现软件的需求管理 - 8 (全文完)

【本篇为《如何有效实现软件的需求管理》第八篇,(第一篇,第二篇,第三篇,第四篇,第五篇,第六篇,第七篇,第八篇)】       版本控制:   在我们公司的实际需求管理中,需求的版本控制用...
  • softerwarer
  • softerwarer
  • 2011年11月30日 20:10
  • 3564

结合工具来实现敏捷开发 - 16 (全文完)

随着反思会的结束,一个Sprint的周期也就差不多结束了,就开始进入下一个Sprint了,随着一个个Sprint的不断结束,最后产品也就完成了。在这个过程中,因为每次都有可用的产品,所以大家就会看着这...
  • softerwarer
  • softerwarer
  • 2011年08月23日 21:59
  • 1934
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用Javascript制作一个可自动填写的文本框(全文完)
举报原因:
原因补充:

(最多只允许输入30个字)