分享
 
 
 

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

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处http://xinyistudio.vicp.net/和作者信息及本声明

(接上文)

在函数的最后结尾处设置文本框聚焦,以便用户敲入的字符可以代替选择的文本。

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();

}

Ø 替换文本框中选择的文本(译者注:该功能似乎用处不大,读者直接跳过)

-----------

另一项任务是我们需要用一些其它的文本来替换当前选择的文本,为此,创建了textboxReplaceSelect() 方法,它有两个参数:作用于的文本框对象和要插入的文本。在这里我们要用到TextRange对象,我们需要为IE和Mozilla建立不同的代码,让我们先给出IE的代码:

function textboxReplaceSelect (oTextbox, sText) {

if (isIE) {

var oRange = document.selection.createRange();

oRange.text = sText;

oRange.collapse(true);

oRange.select();

} else if (isMoz) {

...

}

oTextbox.focus();

}

在上面的第4行,从文档当前选择区创建了TextRange对象(可以设想一下在文本框中,由onkeypress事件触发调用),随后的一行我们用给定的字符串替换在选择范围中的文本,在第6行中,调用了TextRange对象的collapse方法,设置选择范围的宽度为0;其中的布尔型参数如果是true,光标会偏向选择范围的结束处,反之。最后,我们用select() 方法将光标确定在选择范围的结束处。

在Mozilla浏览器中利用string对象的一些简单操作来完成相同的效果。我们可以用文本框对象的selectionStart和selectionEnd属性来确定选择的起始和结束点:

function textboxReplaceSelect (oTextbox, sText) {

if (isIE) {

var oRange = document.selection.createRange();

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();

}

在上面的第9行,保存了选择的起始点,第10行看起来挺费解的,事实上这行代码只是用于得到所选择文本前、后的字符串,并在它们之间添加要替换的字符串文本。

接下来的一句代码是需要纠正一下光标在文本后的位置――开始点位置加上所替换文本的长度。

Ø 匹配

―――――――――

下步需要处理的是写一个方法:给定的一个字符串A,在一个string数组中搜索并返回起始处使用了这个字符串A的第一个字符串值B(例如:通过’a’在string数组中查找起始位置使用”a”的字符串值”abcd”)。这个方法的名称是autocompleteMatch(), 它有两个参数:需要匹配的文本和被匹配的所有文本值的数组。

直接搜索――反复地检查数组中的每个值。方法返回以true的形式返回一个值,否则如果没有匹配的值找到,将返回null。全部代码如下:

function autocompleteMatch (sText, arrValues) {

for (var i=0; i < arrValues.length; i++) {

if (arrValues[i].indexOf(sText) == 0) {

return arrValues[i];

}

}

return null;

}

需要注意的是:为保证这函数能够正确工作,你应该将数组中的字符串按字母排序。

(一) (二) (三)

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有