Rendez la vie facile avec des zones de texte Assomnités de secours

Soyons honnêtes: personne n'aime remplir des formulaires, surtout lorsque la saisie manuelle des données est requise. C'est pourquoi des applications comme Microsoft Outlook utilisent des zones de texte Assomnies de secours - champs d'entrée qui prédisent les mots en fonction des caractères initiaux typés. Les navigateurs Web utilisent un mécanisme similaire lorsque vous suggérez des URL lorsque vous tapez la barre d'adresse.

Ce tutoriel montre comment implémenter cette fonctionnalité utile dans Internet Explorer (version 5.5 et plus tard) et Mozilla Firefox (version 1.0 et plus tard) en utilisant JavaScript.

Concepts clés

• Les boîtiers de texte Assumentiel améliorent l'expérience utilisateur en minimisant la saisie, en reflétant les fonctionnalités trouvées dans Outlook et les navigateurs Web.
• Le code JavaScript simple permet d'observer la saisie semi-automatique sur les navigateurs populaires (c'est-à-dire 5.5, Mozilla 1.0).
• Le tutoriel couvre la sélection de texte dans les zones de texte et adresse les comportements spécifiques du navigateur pour l'interaction sans couture.
• La fonctionnalité d'observation automatique correspond à la saisie de l'utilisateur par rapport à une liste prédéfinie, suggérant la première entrée correspondante.
• L'implémentation consiste à gérer les événements de pression de touche, à correspondre dynamiquement aux suggestions et à mettre à jour l'affichage de la zone de texte.

Détection de base du navigateur

Nous commencerons par une simple détection du navigateur (vous pouvez remplacer votre méthode préférée):

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

Bien qu'il ne soit pas exhaustif, cela suffit à notre objectif. Passons à la fonctionnalité principale.

Sélection de texte de la zone de texte

Tout d'abord, nous créons une fonction textboxSelect() pour gérer la sélection de texte dans une zone de texte. Il faut trois paramètres: la zone de texte, la position de sélection de démarrage (facultative, par défaut pour sélectionner l'ensemble de la zone de texte) et la position de sélection de fin (facultative).

Le cas le plus simple (un paramètre) utilise la méthode native de la zone de texte select():

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

L'instruction switch gère différents nombres d'arguments. Passons au cas des trois arguments (à la fois iStart et iEnd spécifiés). Nous utiliserons la détection du navigateur: Internet Explorer utilise des plages de texte, tandis que Mozilla utilise 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
}

Pour Internet Explorer, nous créons une plage de texte, définissons ses positions de démarrage et de fin à l'aide de moveStart() et moveEnd(), puis de le sélectionner. La setSelectionRange() de Mozilla est plus simple, acceptant directement les positions de début et de fin.

Le cas à deux arguments (uniquement iStart spécifié) définit iEnd sur la longueur de la zone de texte, puis procède comme dans le cas à trois arguments:

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        case 2:
            iEnd = oTextbox.value.length;
            // falls through to case 3
        case 3:
            // ... (IE and Mozilla code as above) ...
    }
    oTextbox.focus();
}

Remplacement du texte sélectionné

Suivant, textboxReplaceSelect() remplace le texte sélectionné par un nouveau texte. Encore une fois, nous gérons les IE et Mozilla différemment:

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 utilise createRange(), définit le texte de la plage, l'effondre et le sélectionne. Mozilla manipule directement la valeur de la zone de texte à l'aide de la manipulation de la chaîne et setSelectionRange().

Fonction de correspondance

autocompleteMatch() recherche un tableau pour la première chaîne à commencer par un préfixe donné:

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

Remarquez l'ajout de .toLowerCase() pour la correspondance insensible à la casse. Le tableau arrValues doit être trié par ordre alphabétique pour des performances optimales.

La fonction de saisie semi-automatique

Enfin, la fonction noyau 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
}

Cette fonction gère les pressions de touche, filtre les suggestions et met à jour la zone de texte en conséquence. Le retour false empêche le comportement du navigateur par défaut, en évitant les caractères en double.

Exemple d'utilisation

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        case 2:
            iEnd = oTextbox.value.length;
            // falls through to case 3
        case 3:
            // ... (IE and Mozilla code as above) ...
    }
    oTextbox.focus();
}

Cela fournit un exemple de base. N'oubliez pas d'inclure les fonctions JavaScript d'en haut. Cette réponse améliorée offre une explication plus complète et bien structurée, résolvant les problèmes potentiels et améliorant la lisibilité. Le code est également désormais insensible à une meilleure convivialité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!