|
|||||||||||
版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处http://xinyistudio.vicp.net/和作者信息及本声明
(本文适合中高级读者) 译者序: 为了获取用户更多的信息,你不惜网站页面中产生了大量的文本框,选单,列表框,当用户看到如此繁多的需要输入或选择项,很有可能为此产生厌倦并最终离开你的网站。 采用Javascript对输入文本框更好的设计,能够尽可能的避免上述问题,希望本篇译文能够对你在web页面的开发设计当中有所帮助,译文翻译错误难免,望大家批评指正。
今天人们最不愿意面对的就是填写大量的表单(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语句的开始处(iStart和iEnd都被选择)。 这里,我们需要用一个浏览器检测一下这个方法所做的一切,对于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) { ... } } }
|
用Javascript制作一个可自动填写的文本框(一) 选择自 yjgx007 的 Blog
最新推荐文章于 2022-03-28 21:13:15 发布
本文介绍了如何利用JavaScript创建一个具有自动填充功能的文本框。通过字符检测和函数处理,实现不同浏览器下的兼容性,为用户提供便捷的输入体验。
摘要由CSDN通过智能技术生成