web-dev-qa-db-fra.com

Comment accéder à Chrome suggestions de vérification orthographique en JavaScript

Comment détecter une faute d'orthographe dans une zone de texte en JavaScript? Y a-t-il un événement associé à cela? Comment accéder aux suggestions de vérification orthographique de Chrome pour un mot mal orthographié?

javascriptgoogle-chromechromiumspell-checking
47
user4985407

Comment accéder aux suggestions de vérification orthographique de Chrome pour un mot mal orthographié?

À ma connaissance, vous ne pouvez pas . Pour répondre plus complètement, je mentionnerai également les problèmes liés:

Y a-t-il un événement associé à cela?

Non, l'événement contextmenu ne fournit rien d'utile à cet effet: il ne contient aucune information de vérification orthographique et vous ne pouvez pas lire la liste des éléments du menu contextuel (qui peuvent contenir des suggestions d'orthographe) . L'événement change ne fournit pas non plus d'informations de vérification orthographique.

Comment détecter une faute d'orthographe dans une zone de texte en JavaScript?

Vous pouvez soit coder cela vous-même, soit utiliser une bibliothèque tierce. Il y a d'autres questions Stack Overflow sur ce sujet ou vous pouvez rechercher par vous-même. Les questions de débordement de pile associées incluent:

26
Ninjakannon

Il n'y a pas d'API pour accéder aux suggestions de vérification orthographique de Chrome, ni aucun événement natif déclenché lorsque les mots sont mal tapés. Cependant, les événements pourraient être implémentés.

Je n'ai aucune idée de votre cas d'utilisation pour cette fonctionnalité, mais j'ai mis en place une démonstration en utilisant API Spellcheck de montanaflynn sur MashApe . La démo observe une zone de texte et lorsque l'utilisateur interrompt la saisie, il envoie le texte via l'API à tester. L'API renvoie JSON contenant la chaîne d'origine, la chaîne corrigée suggérée et un objet contenant les mots corrigés et leurs remplacements suggérés.

Les suggestions sont affichées sous la zone de texte. Lorsque des suggestions sont survolées, le mot mal saisi est mis en surbrillance. Lorsque vous cliquez dessus, la faute de frappe est remplacée par la suggestion.

J'ai également ajouté une fonction de mélange, qui brouille les mots de la chaîne avant de l'envoyer, pour ajouter une couche de confidentialité à l'utilisation de l'API (elle utilise également SSL). Ni l'API ni Chrome n'utilisent des suggestions contextuelles, donc le brassage ne modifie pas les résultats.

Voici un lien vers le CodePen: http://codepen.io/aecend/pen/rOebQq

Et voici le code:

[~ # ~] css [~ # ~] 

<style>

    * {
        font-family: sans-serif;
    }

    textarea {
        margin-bottom: 10px;
        width: 500px; 
        height: 300px;
        padding: 10px;
    }

    .words {
        width: 500px;
    }

    .Word {
        display: inline-block;
        padding: 2px 5px 1px 5px;
        border-radius: 2px;
        background: #00B1E6;
        color: white;
        margin: 2px;
        cursor: pointer;
    }

</style>

[~ # ~] html [~ # ~] 

<textarea id="text" placeholder="Type something here..."></textarea>
<div id="words"></div>

JavaScript 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>

    ;(function(){

        "use strict";

        var words = document.getElementById("words"),
            input = document.getElementById("text"),
            timeout, xhr;

        input.addEventListener("keyup", function(e){

            if (timeout) clearTimeout(timeout);

            if (!this.value.trim()) words.innerHTML = '';

            timeout = setTimeout(function() {

                var test_phrase = shuffle_words( input.value );

                spell_check(test_phrase);

                timeout = null;

            }, 500);

        });

        function shuffle_words(inp) {

            inp = inp.replace(/\s+/g, ' ');

            var arr = inp.split(" "),
                n = arr.length;

            while (n > 0) {
                var i = Math.floor(Math.random() * n--),
                    t = arr[n];
                arr[n] = arr[i];
                arr[i] = t;
            }

            return arr.join(' ');
        }

        function spell_check(text){

            if (xhr) xhr.abort();

            xhr = $.ajax({
                url: 'https://montanaflynn-spellcheck.p.mashape.com/check/',
                headers: {
                    'X-Mashape-Key': 'U3ogA8RAAMmshGOJkNxkTBbuYYRTp1gMAuGjsniThZuaoKIyaj',
                    'Accept': 'application/json'
                },
                data: { 
                    'text': text
                },
                cache: false,
                success: function(result){

                    xhr = null;
                    suggest_words(result);

                }
            });

        }

        function suggest_words(obj){

            if (!obj.corrections) return;

            words.innerHTML = '';

            for (var key in obj.corrections) {

                if (obj.corrections.hasOwnProperty(key)) {

                    var div = document.createElement("div");
                    div.className = "Word";
                    div.innerHTML = obj.corrections[key][0];
                    div.orig = key;

                    div.onmouseover = function() {
                        var start = input.value.indexOf(this.orig);
                        input.selectionStart = start;
                        input.selectionEnd = start + this.orig.length;
                    };

                    div.onmouseout = function() {
                        var len = input.value.length;
                        input.selectionStart = len;
                        input.selectionEnd = len;
                    }

                    div.onclick = function() {
                        input.value = input.value.replace(this.orig, this.innerHTML);
                        this.parentNode.removeChild(this);
                    }

                    words.appendChild(div);

                }

            }

        }

    })();

</script>

J'ai seulement utilisé jQuery pour simplifier la demande AJAX pour cette démonstration. Cela pourrait facilement être fait dans Vanilla JS.

5
aecend

Vous pouvez désactiver la vérification orthographique du navigateur interne et intégrer toute autre bibliothèque de vérification orthographique open source, par exemple JavaScript SpellCheck . Il contient tous les événements dont vous pourriez avoir besoin pour une intégration approfondie, consultez la page API .

0
Eugene Tiurin