精品国产亚洲一区二区三区,男女作爱在线观看免费网站,欧美的又大又长做禁片A片,97国产精品人妻无码久久久

版權聲明：可以任意轉載，轉載時請務必以超鏈接形式標明文章原始出處 http://xinyistudio.vicp.net/ 和作者信息及本聲明

（ 本文適合中高級讀者 ）

譯者序：

為了獲取用戶更多的信息，你不惜網站頁面中產生了大量的文本框，選單，列表框，當用戶看到如此繁多的需要輸入或選擇項，很有可能為此產生厭倦并最終離開你的網站。

采用Javascript對輸入文本框更好的設計，能夠盡可能的避免上述問題，希望本篇譯文能夠對你在web頁面的開發(fā)設計當中有所幫助，譯文翻譯錯誤難免，望大家批評指正。

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

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

在這篇教程中用了一點點 Javascript 的控制，我們將創(chuàng)建具有與 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;

這代碼很明顯不是非常完善，但它看來對于我們要達到的目的已足矣。讓我們開始這個項目吧。

Ø 選擇文本框

－－－－－－－－－――

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

調用這個方法 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) {

...

}

}

}

在粗體代碼中，我們從一個 text range 對象（由文本框對象創(chuàng)建的文本范圍對象 TextRange ）開始， TextRange 設置了文本選擇范圍的起始和結束坐標，要調整這開始坐標我們用 moveStart() 方法；這個方法給出了兩個參數：參數一是移動間隔類型，代碼中使用了 ”character” （字符）類型 ；參數二是移動多少個間隔，比如移動了 5 個間隔那么就由參數一 ”character” 得知移動了 5 個字符， 如果參數一是 ”word” （詞），那么就移動了 5 個詞。（ 譯者注： 關于 TextRange 對象的方法詳細說明詳見 MSDN ）。 moveEnd() 有同樣的參數，稍有不同的是其第二個參數必須是負數（ 譯者注 ：在 MSDN2001 中查得這個參數可以是正數，可能原作者考慮到 IE 版本較低的問題），你可以想象為移動到被選擇文本結束處，然后后退一個間隔，后退兩個間隔 … 。為了獲得 moveEnd() 的第二個參數，我們將賦給 iEnd 文本框中文本長度的負值， 因此，如果 iEnd 是 8 且文本框中有 10 個字符，第二個參數變?yōu)?-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 繼續(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 中我們沒有使用 break 語句，只是在執(zhí)行完 case 2 后的語句后再進入下一個 case 語句。

(一) (二) （三）