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

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

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

 

本文适合中高级读者

译者序:

为了获取用户更多的信息,你不惜网站页面中产生了大量的文本框,选单,列表框,当用户看到如此繁多的需要输入或选择项,很有可能为此产生厌倦并最终离开你的网站。

采用Javascript对输入文本框更好的设计,能够尽可能的避免上述问题,希望本篇译文能够对你在web页面的开发设计当中有所帮助,译文翻译错误难免,望大家批评指正。

 

 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

    今天人们最不愿意面对的就是填写大量的表单(form),特别是那些需要敲入字符的文本框(就是我们经常用的<input type=text> html标记, 以后为方便就称为文本框)。

微软在outlook中结合了可自动完成输入的文本框--文本框检查由用户输入的少量的字符,然后从给定的下拉列表中给出一个建议的词。同样的,当你开始在web地址栏中填入一个url地址,你的Web浏览器会给你推荐一个url的下拉列表单。

 

在这篇教程中用了一点点Javascript的控制,我们将创建具有与IE(版本5.5或更高)

Mozilla(版本1.0或更高)浏览器相类似行为的输入文本框。

 

 

Ø 简单的浏览器检测

-----------

首先,我们需要做一个浏览器的检测,下面是一些简单的代码(这个过程可以用你自已写的代码替代它)

var isOpera = navigator.userAgent.indexOf(“Opera”) > -1;

var isIE = navigator.userAgent.indexOf(“MSIE”) > 1 && !isOpera;

var isMoz = navigator.userAgent.indexOf(“Mozilla/5.”) == 0 && !isOpera;

 

这代码很明显不是非常完善,但它看来对于我们要达到的目的已足矣。让我们开始这个项目吧。

 

Ø 选择文本框

---------――

在这过程的第一步是创建一个方法,这个方法可以在一个文本框中选择确定的文本数。我将

调用这个方法 textboxSelect() , 它有三个参数,第一个参数是让这个方法作用于的对象:oTextbox;第二个参数是非必选项,它指示了选择的起始位置(如果这个参数被忽略,那么全部的文本都被选择);第三个参数,同样是非必选项,指示了选择的结束位置。如果提供了第二个参数,但第三个参数未提供,在文本框中被选的文本将从起始位置到结束位置。

 

我们写一个非常容易理解的格式:如果仅有一个参数提供,那么我们就使用文本框的原型方法select() 在这个文本框中以选择所有的文本:

 

function textboxSelect(oTextbox, iStart, iEnd) {

 

   switch(arguments.length) {

       case 1:

           oTextbox.select();

           break;

       ...

   }

}

 

在这里我们使用了switch语句测试有多少个参数输入。如果仅有一个,即只有oTextbox

输入。下一步, 我们跳到有三个参数都被选择的case语句的开始处(iStartiEnd都被选择)。

这里,我们需要用一个浏览器检测一下这个方法所做的一切,对于IE浏览器,我们将使用一个文本范围对象。

 

function textboxSelect (oTextbox, iStart, iEnd) {

 

   switch(arguments.length) {

       case 1:

           oTextbox.select();

           break;

 

      case 3:

           

           if (isIE) {

               var oRange = oTextbox.createTextRange();

               oRange.moveStart("character", iStart);

               oRange.moveEnd("character", -oTextbox.value.length + iEnd);     

               oRange.select();                                             

           } else if (isMoz) {

               ...

           }                    

   }

}

 

在粗体代码中,我们从一个text range对象(由文本框对象创建的文本范围对象TextRange)开始,TextRange设置了文本选择范围的起始和结束坐标,要调整这开始坐标我们用moveStart() 方法;这个方法给出了两个参数:参数一是移动间隔类型,代码中使用了”character”(字符)类型 ;参数二是移动多少个间隔,比如移动了5个间隔那么就由参数一”character”得知移动了5个字符, 如果参数一是”word”(词),那么就移动了5个词。(译者注:关于TextRange对象的方法详细说明详见MSDN)。moveEnd()有同样的参数,稍有不同的是其第二个参数必须是负数(译者注:在MSDN2001中查得这个参数可以是正数,可能原作者考虑到IE版本较低的问题),你可以想象为移动到被选择文本结束处,然后后退一个间隔,后退两个间隔。为了获得moveEnd()的第二个参数,我们将赋给 iEnd文本框中文本长度的负值, 因此,如果iEnd 8且文本框中有10个字符,第二个参数变为-2,选择范围会将结束点会后退2个字符。最终,我们调用select() 方法在文本框中加亮选择的范围。

 

Mozilla浏览器完成上面这些事情居然更容易办到。

文本框对象有一个setSelectionRange() 方法,它有两个参数:选择的开始和结束位置,可以直接通过iStart iEnd 设定:

 

function textboxSelect (oTextbox, iStart, iEnd) {

   switch(arguments.length) {
       case 1:
           oTextbox.select();
           break;

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

 

现在我们返回到上一个case语句处,即只赋给了两个参数(iEnd 未赋值)的case语句处。

实际上,与赋三个参数不同的是iEnd 必须等于在文本框中字符串的长度就可以了。像下面这样实现:

function textboxSelect (oTextbox, iStart, iEnd) {

   switch(arguments.length) {
       case 1:
           oTextbox.select();
           break;

       case 2:
           iEnd = oTextbox.value.length;
           /* falls through
case3继续处理
*/
           
       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);
           }                    
   }
}

 

在上面的case 2 中我们没有使用break 语句,只是在执行完case 2后的语句后再进入下一个case语句。

 

 

(一)  (二) (三)

 

用Javascript制作一个可自动填写的文本框(一) 选择自 yjgx007 的 Blog

CSDN - 文档中心 - Javascript 阅读:8074   评论: 1    参与评论 标题  用Javascript制作一个可自动填写的文本框(一)     选择自 yjgx007 的 B...
  • hbuzhang
  • hbuzhang
  • 2004年12月13日 21:48
  • 2910

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

版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处http://xinyistudio.vicp.net/和作者信息及本声明  (接上文)在函数的最后结尾处设置文本框聚焦,以便用户敲入的...
  • yjgx007
  • yjgx007
  • 2004年02月07日 22:54
  • 1177

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

版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处http://xinyistudio.vicp.net/和作者信息及本声明   Ø 对autocomplete()的补充对autocom...
  • yjgx007
  • yjgx007
  • 2004年02月07日 22:54
  • 1150

操作自动生成的html表格里 对文本框加一减一的例子

JQuery操作html表格 对文本框加一减一的例子 无ID标识之类 function calc(obj, val) { var $input = $($(obj).pare...
  • CommandBaby
  • CommandBaby
  • 2016年05月24日 10:00
  • 1620

CSS自动伸缩的文本输入框

CSS实现自动伸缩的文本输入框,鼠标点击的时候,文本框会自动伸长,不输入的时候恢复原样,能点小智能的感觉,希望大家喜欢。 自动伸缩的输入框 body{ background:#fff...
  • changwei07080
  • changwei07080
  • 2012年04月10日 14:41
  • 1636

文本和下拉结合的可填可选输入框

文本和下拉结合的可填可选输入框前段时间客户要求输入框既可以像文本框那样输入,又可以下拉选择 。本以为会非常的复杂,后来做起来却发现并不难,只是有些巧妙的地方要注意。可填可选的输入框是由一个input ...
  • Rachael1001
  • Rachael1001
  • 2007年06月26日 16:01
  • 3659

AJAX基本应用之:根据输入内容自动填充下拉框

要在ASP.NET中实现AJAX,请先下载ajax.dll并引用,并且最好对AJAX的基本原理有所了解。有一本电子本叫《ajax基础教程》,网上有下的,讲得很清楚。里面代码是JAVA版,不过没有关系。...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2007年01月29日 14:44
  • 2116

JavaScript编写简易计算器

一、前言 在看DRP视频的过程中,再次复习到了HTML、CSS、JavaScript。下面做一个简易计算器来复习一下相关知识。 二、HTML应用 首先呢,就是使用HTML画页面,咱们应该先把计算器的大...
  • qq_26545305
  • qq_26545305
  • 2017年02月14日 16:30
  • 957

当鼠标滑过文本框自动选中输入框内容JS代码

代码: 响应鼠标自动选中文本框内容 function selectInputContent(n){ obj =document.getElementById(n); obj.foc...
  • ACdreamers
  • ACdreamers
  • 2013年11月07日 13:35
  • 2209

VB制作网页自动填表(强烈推荐)

VB制作网页自动填表(强烈推荐) VB制作简单模拟器教程入门版 第一讲 如何用VB编程打开一个网页:   由于是为做模拟器做铺垫,所以就不介绍别的方法,只介绍一种最简单的用webbr...
  • dongzhiquan
  • dongzhiquan
  • 2009年07月29日 23:17
  • 9138
收藏助手
不良信息举报
您举报文章:用Javascript制作一个可自动填写的文本框(一)
举报原因:
原因补充:

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