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

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

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

 

(接上文)<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

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

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对象,我们需要为IEMozilla建立不同的代码,让我们先给出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对象的一些简单操作来完成相同的效果。我们可以用文本框对象的selectionStartselectionEnd属性来确定选择的起始和结束点:

 

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;

}

 

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

(一)  (二) (三)

javascript自动填写表单小技巧

在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作,自动提交表单,轻松且高效。 步骤 ...
  • cslie
  • cslie
  • 2015年10月08日 14:20
  • 4477

入手爬虫利器:phantomjs+selenium、自动填充文本框、自动点按钮

http://fund.eastmoney.com/fund.html#os_0;isall_0;ft_;pt_1前面我们通过『眼球』的方式,发现要抓取第二页的数据,是一段js脚本生成的。 我们希望能...
  • github_26672553
  • github_26672553
  • 2017年11月20日 16:33
  • 307

JavaScript实现带自动提示的文本框效果代码

示例一:直接编写AJAX 实现。  客户端:  复制代码代码如下:       Ajax实现自动提示的文本框    body{  font-family:Arial,...
  • tyczp
  • tyczp
  • 2017年05月06日 12:49
  • 259

JS实现是一个文本框(值为参数)输入另一个显示(查询结果)

最近在项目当中遇到了这么一个问题:“在一个文本框中输入编号,然后从数据库中查询对应的名称动态的显示在另一个文本框中。”...
  • Senior_lee
  • Senior_lee
  • 2015年02月10日 16:00
  • 1966

从零开始编写自己的JavaScript框架(二)

2. 数据绑定 2.1 数据绑定的原理 数据绑定是一种很便捷的特性,一些RIA框架带有双向绑定功能,比如Flex和Silverlight,当某个数据发生变更时,所绑定的界面元素也发生变更,...
  • u013358378
  • u013358378
  • 2016年10月08日 10:19
  • 219

JS基础——修改文本框的值(函数传参)

CSS部分: *{ padding: 0; margin: 0;} body{ font-size: 12px; color: #333; background: #fff;} li{ list-...
  • u011175410
  • u011175410
  • 2015年11月27日 17:27
  • 630

JavaScript动态添加文本框

document.getElementById('new').onclick = function() { var input = document.createElement('inp...
  • wangjianyu0115
  • wangjianyu0115
  • 2016年03月04日 10:57
  • 452

通过一个word模板来生成新的word并且填充内容

关于用Java编写生成word文档,动态添加数据到word文档的一些心得,经过翻阅了无数的有用的和无用的资料以后,总算找到了一种靠谱的方法 1.概述 经过反反复复的查阅资料,总算找到了一个靠谱的生...
  • u012438476
  • u012438476
  • 2017年03月21日 16:19
  • 2115

自动完成文本框(AutoCompleteTextView)提示文本框

自动完成文本框(AutoCompleteTextView)从EditText派生而出,实际上也是一个文本编辑框,比文本编辑框多了一个功能:当用户输入一个(指定个数)字符之后,自动完成文本框会显示一个下...
  • mengshirui_
  • mengshirui_
  • 2016年07月20日 17:28
  • 731

vc遍历网页表单并自动填写提交

1.独立代码 //-----------开始---------------------// #include #include #include #include #inclu...
  • u013037007
  • u013037007
  • 2015年12月08日 22:16
  • 782
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用Javascript制作一个可自动填写的文本框(二)
举报原因:
原因补充:

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