使用自动完整的文本框使生活变得容易

老实说：没人喜欢填写表格，尤其是在需要手动数据输入时。 这就是为什么像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中文网其他相关文章！