Démarrage rapide : saisie et modification de texte (applications du Windows Store en JavaScript et en HTML)

Les applications du Windows Store en JavaScript peuvent utiliser plusieurs éléments pour la saisie et la modification de texte, ainsi qu’un ensemble d’attributs et de propriétés pour la mise en forme du texte. Les principaux éléments de saisie de texte sont text box, text area, password input box et rich edit box/rich text box. Cette rubrique de démarrage rapide indique comment utiliser ces éléments pour afficher, saisir et modifier du texte.

Voir cette fonctionnalité en action dans notre série Fonctionnalités d’application, de A à Z:  Interface utilisateur des applications du Windows Store, de A à Z

Prérequis

Choix d’un contrôle de texte

Les applications du Windows Store en JavaScript peuvent utiliser quatre éléments principaux de saisie de texte : text box, text area, password input box et rich edit box/rich text box. L’élément que vous utilisez dépend de votre scénario. Voici quelques scénarios et les éléments recommandés.

ScénarioÉléments recommandés

Saisir ou modifier du texte brut, tel que dans un formulaire

Text box, text area

Saisir un mot de passe

Password input box

Modifier un document, un article ou un blog qui requiert une mise en forme, des paragraphes, des liens hypertexte ou des images incluses.

Rich edit box/rich text box

 

Remarque  Des éléments de saisie de texte secondaires sont disponibles, mais ils ne sont pas traités dans cette rubrique. Parmi ces éléments, citons email input box, number input box et URL input box.

Éléments text box et text area

Vous pouvez utiliser les éléments text box et text area pour saisir et modifier du texte sans mise en forme. Utilisez l’élément text box pour une seule ligne de texte et text area pour plusieurs lignes de texte. Voici le code HTML correspondant à un élément text box simple.


<input type="text" />

Voici le code HTML correspondant à un élément text area simple.


<textarea></textarea>

Pour définir un élément text box ou text areaen lecture seule, affectez à sa propriété readonly la valeur readonly. Vous pouvez obtenir ou définir le texte sélectionné dans un élément text area à l’aide des propriétés selectionStart et selectionEnd. Utilisez l’événement onselect pour réaliser une action lorsque l’utilisateur sélectionne du texte.

Vous trouverez ci-dessous un exemple de ces propriétés et événements. Lorsque vous sélectionnez du texte dans le premier contrôle text area, ce texte s’affiche dans le second contrôle text area, en lecture seule. Les valeurs de la longueur de la sélection et de la propriété selectionStart sont indiquées dans deux éléments label. Pour ce faire, l’événement onselect est utilisé.



<!-- default.html -->

<!-- ... -->
<div><textarea id="textarea" rows="3">The text that is selected in this text area will show up in the read-only text area below.</textarea></div>
<div><textarea id="readonlyTextarea" contenteditable="false"></textarea></div>
<div><label id="selLength"></label></div>
<div><label id="selStart"></label></div>
<!-- ... -->




// default.js

(function () {
    // ...

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: ...
            } else {
                // TODO: ...
            }
            args.setPromise(WinJS.UI.processAll().done(
                function () {
                    var textArea = document.getElementById("textarea");
                    textArea.addEventListener("select", onselectTextarea, false);

                    // ...
                }
            ));
         }
    };

    app.oncheckpoint = function (args) {
        // TODO: ...
    };

    function onselectTextarea() {
        var textarea = document.getElementById("textarea");
        var readonlyTextarea = document.getElementById("readonlyTextarea");
        var selLength = document.getElementById("selLength");
        var selStart = document.getElementById("selStart");

        readonlyTextarea.value = textarea.value.substring(
                                 textarea.selectionStart,
                                 textarea.selectionEnd);
        selLength.innerText = "Selection length is " +
                              (textarea.selectionEnd -
                              textarea.selectionStart);
        selStart.innerText = "Selection starts at " + textarea.selectionStart;
    }

    // ...

    app.start();
})();

Résultat de ce code :

Texte sélectionné dans une zone de texte

Zone d’entrée de mot de passe

Vous pouvez saisir une ligne unique de contenu sans renvoi automatique dans un élément password input box. Par défaut, l’utilisateur ne peut pas voir le texte saisi ; seuls les caractères de mot de passe représentant le texte s’affichent.

Le texte saisi par l’utilisateur s’obtient à partir de la propriété value, généralement dans le gestionnaire d’événements onchange.

Voici le code qui illustre l’utilisation d’un élément password input box. Lorsque l’utilisateur saisit un mot de passe, ce dernier fait l’objet d’une vérification afin de déterminer s’il s’agit de la valeur littérale « Password » ou si sa longueur est inférieure ou supérieure à 8 caractères. Si tel est le cas, un message s’affiche à l’attention de l’utilisateur dans un élément label.


<!-- default.html -->

<!-- ... -->
<div><input id="password" type="password" placeholder="Enter 8 characters"/></div>
<div><label id="status"></label></div>
<!-- ... -->



// default.js

(function () {
    // ...

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: ...
            } else {
                // TODO: ...
            }
            args.setPromise(WinJS.UI.processAll().done(
                function () {
                    //...

                    var password = document.getElementById("password");
                    password.addEventListener("change", onchangePassword, false);

                    // ...
                }
            ));
         }
    };

    app.oncheckpoint = function (args) {
        // TODO: ...
    };

    // ...

    function onchangePassword() {
        var password = document.getElementById("password");
        var status = document.getElementById("status");

        if (password.value == "Password") {
            status.innerText = "'Password' is not allowed as a password.";
        }
        else if (password.value.length != 8) {
            status.innerText = "Password must be exactly 8 characters.";
        }
        else {
            status.innerText = "";
        }
    }

    // ...

    app.start();
})();


Élément rich edit box/rich text box

Vous pouvez utiliser un élément rich edit box/rich text box pour entrer et modifier des documents au format RTF qui contiennent du texte mis en forme, des liens hypertexte et des images. Pour définir un élément rich edit box/rich text box en lecture seule, affectez à sa propriété contentEditable la valeur false.

Vous pouvez utiliser des propriétés telles que innerHTML pour obtenir le contenu d’un élément rich edit box/rich text box.

Cet exemple montre comment charger et enregistrer du contenu HTML dans un élément rich edit box/rich text box.



<!-- default.html -->

<!-- ... -->
<div>
    <button id="openFile">Open file</button>
    <button id="saveFile">Save file</button>
</div>
<div id="editor" contenteditable="true" />
<!-- ... -->


// default.js

(function () {
    // ...

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: ...
            } else {
                // TODO: ...
            }
            args.setPromise(WinJS.UI.processAll().done(
                function () {
                    //...

                    var openFile = document.getElementById("openFile");
                    openFile.addEventListener("click", onclickOpen, false);

                    var saveFile = document.getElementById("saveFile");
                    saveFile.addEventListener("click", onclickSave, false);

                    // ...
                }
            ));
         }
    };

    app.oncheckpoint = function (args) {
        // TODO: ...
    };

    // ...
    
    function onclickOpen() {
        var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

        openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
        openPicker.fileTypeFilter.replaceAll([".html"]);
        openPicker.pickSingleFileAsync().then(
            function (file) {
                if (file) {
                    Windows.Storage.FileIO.readTextAsync(file).then(
                        function (fileContent) {
                            var editor = document.getElementById("editor");
                            editor.innerHTML = fileContent;
                        }
                    );
                }
            }
        ); 
    }

    function onclickSave() {
        var savePicker = new Windows.Storage.Pickers.FileSavePicker();

        savePicker.suggestedStartLocation =
            Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
        savePicker.fileTypeChoices.insert("HTML", [".html"]);
        savePicker.suggestedFileName = "Sample HTML Markup";
        savePicker.pickSaveFileAsync().then(
            function (file) {
                if (file) {
                    var fileContents = document.getElementById("editor").innerHTML;
                    // Prevent updates to the remote version of the file until 
                    // completeUpdatesAsync is called.
                    Windows.Storage.CachedFileManager.deferUpdates(file);
                    Windows.Storage.FileIO.writeTextAsync(file, fileContents).done(
                        Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done()        
                    );
                }
            }
        );
    }

    app.start();
})();

Utilisation du clavier tactile

Windows 8 comporte un clavier tactile permettant de saisir du texte lors de l’exécution d’une application sur un appareil disposant d’un écran tactile. Ce clavier est appelé lorsque l’utilisateur appuie sur un élément d’entrée modifiable, tel que text box ou password input box, et disparaît lorsque ce champ ne correspond plus à la zone active. Pour déterminer lorsqu’il est appelé ou ignoré, le clavier tactile utilise des informations sur l’accessibilité. La disposition du clavier tactile peut changer en fonction du type d’élément d’entrée modifiable. Par exemple, pour un élément email input box, la touche @ apparaît sur le clavier tactile.

Récapitulatif et étapes suivantes

Vous avez appris à créer des éléments text box, text area, password input box et rich edit box/rich text box pour afficher et modifier du texte dans votre application.

Pour obtenir des exemples de code supplémentaires illustrant ces contrôles, voir Exemple de contrôles essentiels HTML.

Rubriques associées

Recommandations et liste de vérification sur la saisie de texte

 

 

Afficher:
© 2014 Microsoft. Tous droits réservés.