So greifen Sie auf die JavaScript-Rechtschreibprüfung in JavaScript zu

Question

Wie erkennt man einen Schreibfehler in einem Textfeld in JavaScript? Ist ein Ereignis damit verbunden? Wie kann ich auf die Rechtschreibvorschläge von Chrome für ein falsch geschriebenes Wort zugreifen?

Answer 1

Wie kann ich auf die Rechtschreibvorschläge von Chrome für ein falsch geschriebenes Wort zugreifen?

Soweit ich weiß, you cannot. Zur Beantwortung ausführlicher werde ich auch erwähnen, damit zusammenhängende Fragen:

• Es war einmal eine inoffizielle Google Rechtschreibprüfung API that has disappeared
• Sie können download but not access Chrome gebaut ist im Wörterbuch
• Es gibt no open API for Google's dictionary

Ist ein Ereignis damit verbunden?

Nein, noch hat die contextmenu Ereignis, etwas Sinnvolles für diesen Zweck zur Verfügung stellen: es hat keine Rechtschreibprüfung Informationen und Sie können die Liste der Kontextmenüelemente nicht lesen (die Rechtschreibvorschläge enthalten kann). Das Ereignis change bietet auch keine Informationen zur Rechtschreibprüfung.

Wie erkennt man einen Schreibfehler in einem Textfeld in JavaScript?

Sie können dies entweder selbst programmieren oder eine Bibliothek eines Drittanbieters verwenden. Es gibt weitere Stack Overflow-Fragen zu diesem Thema oder Sie können selbst suchen. Verwandte Stack Overflow Fragen sind:

• Javascript Spell Checking Methods
• javascript spell checker recommendations
• Javascript based spell-checkers for web applications
• Add spell check to my website
• Need Client side spell checker for DIV
• javascript spell checking

Answer 2

Als th Die Frage scheint ein bisschen breit und offen für Interpretationen (besonders mit den aktuellen Bounty-Anforderungen), ich werde damit beginnen zu erklären, wie ich sie interpretiere und versuche, die Teilfragen im Prozess (Q/A-Stil) zu beantworten.

Sie scheinen zu fragen werden:

"Google Chrome"/"Chromium" spezifisch:

1. Q: wenn Browser "Google Chrome"/"Chromium" ein aussetzt Rechtschreibprüfung-API, die Sie können interagieren mit durch die Verwendung von Javascript in einer gemeinsamen Webseite
   A: Nein, nicht wirklich (zumindest nicht so, wie Sie es wünschen).
   Es gibt eine Chrom-spezifische Spellcheck API Proposal (ab Dezember 2012).

   Hier sind einige Teile davon:

   Könnte diese API Teil der Web-Plattform sein?
   Es ist unwahrscheinlich, dass die Rechtschreibprüfung Teil der Webplattform wird.

   Noch wichtiger ist, hat es nur eine Methode namens 'loadDictionary':

   loadDictionary(myDictionaryFile // string path or URL 
          , dictionaryFormat // enumerated string [ "hunspell" (concatentation of .aff and .dic files) 
              //     , "text"  (plain text) 
              //     ] 
         ) // returns int indicating success or an error code in loading the dictionary.  
   

   der Punkt? Unterstützung der Community beim Erstellen benutzerdefinierter Wörterbücher für Zulu, Klingonisch usw., da ungefähr 20-30% der Spellcheck-Bug-Rapports nicht unterstützte Sprachen betrafen.

   Lassen Sie uns jetzt nicht Chrome verwechseln Spell API (oben) mit Chrome/WebKit Spell API (hu sagen, was?):
   Hironori Bono (ein Software-Ingenieur für Google Chrome) proposed an API etwa 2011 und einige related bug rapports und eine patch das war (/ ist noch?) in Chrome.

   void addSpellcheckRange(unsigned long start 
            , unsigned long length 
            , DOMStringList suggestions 
           // [, unsigned short options] 
            ); 
   void removeSpellcheckRange(SpellcheckRange range); 
   

   Anwendungsbeispiel:

   var input = document.querySelector('input'); 
   input.addSpellcheckRange(4 
            , 9 
            , [ 'Chrome' 
             , 'Firefox' 
             , 'Opera' 
             , 'Internet Explorer' 
             ] 
            ); 
   

   
   ^{Quellen:
   http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42,
   http://peter.sh/experiments/spellcheck-api/ (Sie sollten sie in der Lage sein, es zu versuchen, zu leben, wenn diese API funktioniert immer noch ..)}
   Der Punkt? Nachdem ich ein paar Tage darüber nachgedacht hatte, klickte es plötzlich: Benutzerdefinierte Rechtschreibprüfung Integration mit dem Browser - über das Kontextmenü des Browsers, anstatt es zu blockieren und eigene zur Verfügung zu stellen. So könnte man das mit einer vorhandenen externen Rechtschreibbibliothek verbinden.

   Oberhalb der historischen und experimentellen APIs wurde eindeutig nie direkt unterstützt, was Sie erreichen möchten.

2. Q: wenn "Google Chrome"/"Chromium" Rechtschreibprüfung-API ein 'onSpellError' aussetzt (-artigen) Ereignis auf (zum Beispiel) ein TextArea-
   A: Wie oben dargelegt, ist es scheint, dass Chrome kein solches Ereignis hat.
   HTM5 ermöglicht derzeit nur die Aktivierung oder Deaktivierung der Rechtschreibprüfung für von der Rechtschreibprüfung unterstützte Elemente.
3. Q: wie man Zugang Chrome Rechtschreibprüfung Vorschläge für ein falsch geschriebenes Wort
   A: Wie oben dargelegt: es scheint, dass Sie nicht können. Es scheint die gleiche Antwort wie für die fast doppelte Frage zu sein: How can I access Chrome's spell-check dictionary?
   Es könnte interessant sein zu bemerken, dass "TinyMCE's spellchecker was previously provided by 'hacking' a Chrome toolbar API owned by Google, against Google's own legal usage policies. This spellchecking service has been discontinued permanently.". Nun, wenn Sie im Internet suchen, können Sie wahrscheinlich herausfinden, wie sie das gemacht haben, aber es scheint sicherlich nicht der beste Weg zu sein (und befürworten Sie es hier).
   Mithilfe von Javascript-Rechtschreibbibliotheken können Sie jedoch die Wörterbücher von Chrome verwenden (Sie müssten also die Wörterbücher nicht pflegen), aber Sie müssen diese Dateien zusammen mit Ihrer Web-App bereitstellen und versenden (anstatt die installierten herunterzuladen) der Browser).

Allgemein:

4. F: Wie ein Schreibfehler in einem Textfeld in JavaScript erkennen
   A: Internet Explorer erlaubt die Verwendung von Rechtschreibprüfung integriert in Microsoft Word über ActiveX wie im folgenden Code-Snippet aufgeführt.

   function CheckText(text) { 
       var result = new Array; 
       var app = new ActiveXObject('Word.Application'); 
       var doc = app.Documents.Add(); 
       doc.Content = text; 
       for (var i = 1; i <= doc.SpellingErrors.Count; i++) { 
       var spellingError = doc.SpellingErrors.Item(i); 
       for (var j = 1; j <= spellingError.Words.Count; j++) { 
        var word = spellingError.Words.Item(j); 
        var error = {}; 
        error.word = word.Text; 
        error.start = word.Start; 
        error.length = word.Text.length; 
        error.suggestions = new Array; 
        var suggestions = word.GetSpellingSuggestions(); 
        for (var k = 1; k <= suggestions.Count; k++) { 
        error.suggestions.push(suggestions.Item(k).Name); 
        } 
        result.push(error); 
       } 
       } 
       return result; 
   } 
   

   ^{Quelle: https://lists.w3.org/Archives/Public/public-webapps/2011AprJun/0516.html}

   Aber IE/ActiveX/MS-Word ist nicht wirklich das, was Sie gefragt haben, weder ist es sehr Cross-Plattform/Browser, , die uns mit lokalen Javascript verlässt Rechtschreibprüfung Bibliotheken:
   Javascript Spell Checking Methods
   http://code.google.com/p/bjspell/
   http://www.javascriptspellcheck.com/
   http://ejohn.org/blog/revised-javascript-dictionary-search/
   Etc.
   Vergleichen/erklären ist wirklich außerhalb des Umfangs dieser Antwort.
   Es ist erwähnenswert, welches Format des Wörterbuchs Sie verwenden möchten!

   Alternativ könnte ein externer Rechtschreib-API-Dienst verwendet werden (wo ein Server die Daten verarbeitet und Sie mit AJAX kommunizieren).
   Offensichtlich müssen Sie Datenschutzaspekte berücksichtigen!

Die Bounty-'requirements' fragen Sie nach:

1. Q: endgültigen Beweis
   A: ich in Bezug haben sollte etwas mehr gefunden das Thema als einige esoterische experimentelle Merkmale. Ich sehe auch keine Bibliotheken, die versuchen, ihre Funktionalität in einige (kommende) standardisierte Methoden-/Ereignis-Identifikatoren usw. zu unterteilen. Wie bereits erwähnt, haben populäre Bibliotheken wie TinyMCE derzeit auch keine andere Lösung.
   In der Mentalität "Lebensstandard"/"Die Welt ist unser Spielplatz" könnte meine Antwort schon veraltet sein, wenn ich den "Einreichen" -Button drücke. Aber selbst dann würde ich ein solches experimentelles Feature in naher Zukunft auf einer Website/Schnittstelle auf Produktionsebene nicht empfehlen.
2. Q: und eine gute Antwort zu erhalten erklären, wie dieser
   erreichen
   A (Chrom spezifisch oder allgemein Vorschläge Rechtschreibprüfung oder zum Nachweis, dass es ein Tippfehler?): Anders als oben, Ich kann mir nichts vorstellen (außer Bibliotheken, die Web-Entwickler derzeit verwenden (siehe 4)).

Hoffe, das hilft!

Answer 3

Es gibt keine API für den Zugriff auf die Rechtschreibvorschläge von Chrome. Es werden auch keine Ereignisse ausgelöst, wenn Wörter falsch eingegeben werden. Ereignisse könnten jedoch implementiert werden.

Ich habe keine Ahnung, was Ihr Anwendungsfall für diese Funktionalität ist, aber ich habe eine Demo mit montanaflynn's Spellcheck API on MashApe zusammengestellt. Die Demo beobachtet einen Textbereich, und wenn der Benutzer die Eingabe pausiert, sendet er den Text über die zu testende API. Die API gibt JSON mit der ursprünglichen Zeichenfolge, der vorgeschlagenen korrigierten Zeichenfolge und einem Objekt zurück, das die korrigierten Wörter und deren vorgeschlagene Ersetzungen enthält.

Die Vorschläge werden unter dem Textfeld angezeigt. Wenn Vorschläge verschoben werden, wird das falsch eingegebene Wort hervorgehoben. Beim Klicken wird der Tippfehler durch den Vorschlag ersetzt.

Ich habe auch eine Shuffling-Funktion hinzugefügt, die die Wörter in der Zeichenfolge vor dem Senden verschlüsselt, um eine Ebene der Privatsphäre der Verwendung der API (es verwendet auch SSL) hinzuzufügen. Weder die API noch Chrome verwenden kontextbasierte Vorschläge, sodass das Mischen die Ergebnisse nicht ändert.

Hier ist ein Link auf die CodePen: http://codepen.io/aecend/pen/rOebQq

Und hier ist der 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> 

Ich habe nur jQuery die AJAX-Request für diese Demonstration zu vereinfachen. Dies könnte leicht in Vanille JS getan werden.

Answer 4

Sie können die interne Browser-Rechtschreibprüfung deaktivieren und jede andere OpenSource-Rechtschreibbibliothek integrieren, z. B. . Es enthält alle Ereignisse, die Sie für eine tiefe Integration benötigen, überprüfen Sie die API page.