日本欧美视频在线观看,一级片欧美一出一进免费,在线+免费+欧美,国产精品视频在线观看,国产成人精品一区二区,成人免费视频一区

版權(quán)聲明：可以任意轉(zhuǎn)載，轉(zhuǎn)載時(shí)請(qǐng)務(wù)必以超鏈接形式標(biāo)明文章原始出處 http://xinyistudio.vicp.net/ 和作者信息及本聲明

（ 本文適合中高級(jí)讀者 ）

譯者序：

為了獲取用戶更多的信息，你不惜網(wǎng)站頁(yè)面中產(chǎn)生了大量的文本框，選單，列表框，當(dāng)用戶看到如此繁多的需要輸入或選擇項(xiàng)，很有可能為此產(chǎn)生厭倦并最終離開(kāi)你的網(wǎng)站。

采用Javascript對(duì)輸入文本框更好的設(shè)計(jì)，能夠盡可能的避免上述問(wèn)題，希望本篇譯文能夠?qū)δ阍趙eb頁(yè)面的開(kāi)發(fā)設(shè)計(jì)當(dāng)中有所幫助，譯文翻譯錯(cuò)誤難免，望大家批評(píng)指正。

今天人們最不愿意面對(duì)的就是填寫大量的表單(form)，特別是那些需要敲入字符的文本框（就是我們經(jīng)常用的 <input type=text> html 標(biāo)記， 以后為方便就稱為文本框）。

微軟在 outlook 中結(jié)合了可自動(dòng)完成輸入的文本框 -- 文本框檢查由用戶輸入的少量的字符，然后從給定的下拉列表中給出一個(gè)建議的詞。同樣的，當(dāng)你開(kāi)始在 web 地址欄中填入一個(gè) url 地址，你的 Web 瀏覽器會(huì)給你推薦一個(gè) url 的下拉列表單。

在這篇教程中用了一點(diǎn)點(diǎn) Javascript 的控制，我們將創(chuàng)建具有與 IE （版本 5.5 或更高）

和 Mozilla （版本 1.0 或更高）瀏覽器相類似行為的輸入文本框。

Ø 簡(jiǎn)單的瀏覽器檢測(cè)

－－－－－－－－－－－

首先，我們需要做一個(gè)瀏覽器的檢測(cè)，下面是一些簡(jiǎn)單的代碼（這個(gè)過(guò)程可以用你自已寫的代碼替代它）

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

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

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

這代碼很明顯不是非常完善，但它看來(lái)對(duì)于我們要達(dá)到的目的已足矣。讓我們開(kāi)始這個(gè)項(xiàng)目吧。

Ø 選擇文本框

－－－－－－－－－――

在這過(guò)程的第一步是創(chuàng)建一個(gè)方法，這個(gè)方法可以在一個(gè)文本框中選擇確定的文本數(shù)。我將

調(diào)用這個(gè)方法 textboxSelect() , 它有三個(gè)參數(shù)，第一個(gè)參數(shù)是讓這個(gè)方法作用于的對(duì)象： oTextbox ；第二個(gè)參數(shù)是非必選項(xiàng)，它指示了選擇的起始位置（如果這個(gè)參數(shù)被忽略，那么全部的文本都被選擇）；第三個(gè)參數(shù)，同樣是非必選項(xiàng)，指示了選擇的結(jié)束位置。如果提供了第二個(gè)參數(shù)，但第三個(gè)參數(shù)未提供，在文本框中被選的文本將從起始位置到結(jié)束位置。

我們寫一個(gè)非常容易理解的格式：如果僅有一個(gè)參數(shù)提供，那么我們就使用文本框的原型方法 select() 在這個(gè)文本框中以選擇所有的文本：

function textboxSelect(oTextbox, iStart, iEnd) {

switch(arguments.length) {

case 1:

oTextbox.select();

break;

...

}

}

在這里我們使用了 switch 語(yǔ)句測(cè)試有多少個(gè)參數(shù)輸入。如果僅有一個(gè)，即只有 oTextbox 被

輸入。下一步， 我們跳到有三個(gè)參數(shù)都被選擇的 case 語(yǔ)句的開(kāi)始處（ iStart 和 iEnd 都被選擇）。

這里，我們需要用一個(gè)瀏覽器檢測(cè)一下這個(gè)方法所做的一切，對(duì)于 IE 瀏覽器，我們將使用一個(gè)文本范圍對(duì)象。

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) {

...

}

}

}

在粗體代碼中，我們從一個(gè) text range 對(duì)象（由文本框?qū)ο髣?chuàng)建的文本范圍對(duì)象 TextRange ）開(kāi)始， TextRange 設(shè)置了文本選擇范圍的起始和結(jié)束坐標(biāo)，要調(diào)整這開(kāi)始坐標(biāo)我們用 moveStart() 方法；這個(gè)方法給出了兩個(gè)參數(shù)：參數(shù)一是移動(dòng)間隔類型，代碼中使用了 ”character” （字符）類型 ；參數(shù)二是移動(dòng)多少個(gè)間隔，比如移動(dòng)了 5 個(gè)間隔那么就由參數(shù)一 ”character” 得知移動(dòng)了 5 個(gè)字符， 如果參數(shù)一是 ”word” （詞），那么就移動(dòng)了 5 個(gè)詞。（ 譯者注： 關(guān)于 TextRange 對(duì)象的方法詳細(xì)說(shuō)明詳見(jiàn) MSDN ）。 moveEnd() 有同樣的參數(shù)，稍有不同的是其第二個(gè)參數(shù)必須是負(fù)數(shù)（ 譯者注 ：在 MSDN2001 中查得這個(gè)參數(shù)可以是正數(shù)，可能原作者考慮到 IE 版本較低的問(wèn)題），你可以想象為移動(dòng)到被選擇文本結(jié)束處，然后后退一個(gè)間隔，后退兩個(gè)間隔 … 。為了獲得 moveEnd() 的第二個(gè)參數(shù)，我們將賦給 iEnd 文本框中文本長(zhǎng)度的負(fù)值， 因此，如果 iEnd 是 8 且文本框中有 10 個(gè)字符，第二個(gè)參數(shù)變?yōu)?-2 ，選擇范圍會(huì)將結(jié)束點(diǎn)會(huì)后退 2 個(gè)字符。最終，我們調(diào)用 select() 方法在文本框中加亮選擇的范圍。

為 Mozilla 瀏覽器完成上面這些事情居然更容易辦到。

文本框?qū)ο笥幸粋€(gè) setSelectionRange() 方法，它有兩個(gè)參數(shù)：選擇的開(kāi)始和結(jié)束位置，可以直接通過(guò) iStart 和 iEnd 設(shè)定：

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

現(xiàn)在我們返回到上一個(gè) case 語(yǔ)句處，即只賦給了兩個(gè)參數(shù)（ iEnd 未賦值）的 case 語(yǔ)句處。

實(shí)際上，與賦三個(gè)參數(shù)不同的是 iEnd 必須等于在文本框中字符串的長(zhǎng)度就可以了。像下面這樣實(shí)現(xiàn)：

function textboxSelect (oTextbox, iStart, iEnd) {

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

case 2:
iEnd = oTextbox.value.length;
/* falls through 由 case3 繼續(xù)處理 */

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 中我們沒(méi)有使用 break 語(yǔ)句，只是在執(zhí)行完 case 2 后的語(yǔ)句后再進(jìn)入下一個(gè) case 語(yǔ)句。

(一) (二) （三）