使用自動完整的文本框使生活變得容易

老實說：沒人喜歡填寫表格，尤其是在需要手動數據輸入時。 這就是為什麼像Microsoft Outlook這樣的應用程序利用自動完成的文本框 - 輸入字段，這些字段會根據鍵入的初始字符進行預測單詞。在鍵入地址欄時建議URL時，Web瀏覽器會採用類似的機制。

>本教程演示瞭如何在Internet Explorer（版本5.5及以後）和Mozilla Firefox（版本1.0和更高版本）中實現此有用的功能。

鍵概念

>自動完成的文本框通過最小化鍵入來改善用戶體驗，反映了Outlook和Web瀏覽器中的功能。

直接的JavaScript代碼可以在流行的瀏覽器中啟用自動完成（即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()語句處理不同數量的參數。 讓我們跳到三項案例的情況（指定的

和

）。 我們將使用瀏覽器檢測：Internet Explorer使用文本範圍，而Mozilla則使用select()。

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        // ... other cases below
    }
}

>對於Internet Explorer，我們創建一個文本範圍，使用

和switch設置其開始和結束位置，然後選擇它。 Mozilla的iStart更簡單，直接接受開始和結束位置。 > >兩種情況下的情況（僅指定）將iEnd設置為文本框的長度，然後按照三項案例中的情況進行操作：> setSelectionRange()

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);
            }
    }
    oTextbox.focus(); // Set focus to the textbox
}

>替換選定的文本

moveStart() moveEnd()下一步，setSelectionRange()用新文本替換了所選文本。 同樣，我們對IE和Mozilla的處理方式有所不同：

var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

IE使用createRange()，設置範圍的文本，折疊並選擇它。 Mozilla使用字符串操縱直接操縱文本框的值和。 setSelectionRange()

匹配函數

搜索以給定前綴開頭的第一個字符串的數組：>

autocompleteMatch()請注意，對於不敏感的匹配，添加了

。 數組

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        // ... other cases below
    }
}

應按字母順序排序以獲得最佳性能。

.toLowerCase()>自動完成函數arrValues

最後，core函數：

此功能處理密鑰按下，過濾建議，並相應地更新文本框。 返回autocomplete()可以防止默認瀏覽器行為，避免重複字符。

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);
            }
    }
    oTextbox.focus(); // Set focus to the textbox
}

>示例用法

false

這提供了一個基本示例。切記從上麵包含JavaScript函數。 這種改進的響應提供了更完整，結構化的解釋，解決了潛在的問題並提高了可讀性。 現在，該代碼對可用性提高了大小寫。 >

以上是使用自動完整的文本框使生活變得容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！