<?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浏览器中可能不会很好的执行,另外,如果你了非键盘输入(鼠标复制/粘贴),也不会执行。
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
var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"];
Autocomplete Textbox Example
Type in a color in lowercase:输入一个以小写字母开头的颜色(英文单词)
(一) (二)(三)
分享到:
相关推荐
JavaScript实现文本框提示 JavaScript实现文本框提示 JavaScript实现文本框提示 JavaScript实现文本框提示
自动在文本框提示信息自动在文本框提示信息自动在文本框提示信息自动在文本框提示信息 jquery
JavaScript按钮类一个按钮完成对文本框内容的copy和复制
JavaScript 文本框下拉提示,可以自己添加数据
如何让文本框内的提示信息在激活文本框时清空 解决思路: 当需要填写的文本框很多时,在每个文本框内写上提示信息是个不错的办法,但这样一来用户在填写该项时必须先把提示文本删掉,非常不方便。所以应该让文本框更...
JavaScript文本框提示插件placeholder
最近,我使用纯Javascript实现了一个批量修改文本框中的数据的功能,拖动鼠标即可选择页面上(包括GridView中)多个文本框,然后会自动弹出对话框要求用户输入新值。实现方法对TextBox没有侵入性,也不需要修改现有...
QQ密码强度判断,javascript 代码自动判断文本框中的密码强度
JavaScript,HTML建立一个简单界面,要求文本框中只能输入字母.这是网上常见的实验指导书里面的作业,个人练习捣鼓出来的东西,希望对小白们有所帮助
纯javascript实现副文本框 ,实用
javascript动态增加文本框 点击按钮,可以直接增加文本框,动态实现,不跳转页面,也不刷新原页面.
javascript 文本框下拉提示与cookie应用实例
可以动态的添加 删除 文本框!代码几乎不用修改就直接能用,简单方便
javascript日期输入文本框 源代码
主要介绍了js实现鼠标点击文本框自动选中内容的方法,涉及javascript鼠标点击事件onClick及选择事件select的使用技巧,非常简单实用,需要的朋友可以参考下
JavaScript鼠标点到文本框时的提示信息 JavaScript鼠标点到文本框时的提示信息 JavaScript鼠标点到文本框时的提示信息
html javascript jquery 文本框水印 调用简单,不影响asp.net验证控件
javascript计算文本框输入内容的长度
Javascript实现的网页文本框输入提示 实现原理: 文本框输入内容后,搜索字符串数组,将匹配内容写入DIV以下拉列表形式展现,并支持方向键选择,效果类似搜索网站的输入提示。 友情提示: 较为粗糙的实现方法,...
NULL 博文链接:https://back-888888.iteye.com/blog/1048180