How to access Chrome spell-checker settings in JavaScript

Question

How to detect spelling error inside textbox in javascript? Is there an event related to this? How do I access Chrome spelling suggestions for misspelled words?

Answer 1

How do I access Chrome spelling suggestions for misspelled words?

As far as I know, you cannot . To answer more fully, I will also talk about related issues:

• Once upon a time there was an anonymous Google Proofing API which disappeared
• You can download but not access Chrome's built-in dictionary
• no open API for google dictionary

Is there an event related to this?

No, and the contextmenu event contextmenu not contain anything useful for this purpose: it does not have spell check information, and you cannot read the list of context menu items (which may contain spelling suggestions). The change event also does not provide spell check information.

How to detect spelling error inside textbox in javascript?

You can either program this yourself or use a third-party library. There are other questions in this thread, or you can search for yourself. Related questions include:

• Javascript Proofing Methods
• javascript proofing guidelines
• Javascript based web application templates
• Add spellcheck to my site
• Need to check client spelling for DIV .
• javascript spellcheck

Answer 2

Since the question seems a little broad and open to interpretation (especially with the current requirements for bonuses), I will start by explaining how I interpret it and try to answer the subqueries in this process (Q / A style).

You seem to be asking:

Google Chrome / Chrome:

• Q: if the browser "Google Chrome" / "Chromium" provides a spellcheck-API, which you can interact with using JavaScript on a shared web page
  A: No, not really (at least not as you would like).
  There is a specification (since December 2012).

  Here are some parts of it:

  Can this API be part of a web platform?
  Spell checking is unlikely to become part of the web platform.

  More importantly, it has only one method called 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. 

  Point? Helping the community create custom dictionaries for Zulu, Klingon, etc., because approximately 20-30% of Spellcheck error errors were related to unsupported languages.

  Now don't confuse the Chrome SpellCheck validation API (above) with the Chrome / Webkit authentication API (hu? Say what?):
  Hironori Bono (software developer for Google Chrome) proposed the API in 2011 and some bug-related and patch that was (/ still?) In Chrome.

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

  Usage example:

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

  
  ^{Sources:
  http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42 ,
  http://peter.sh/experiments/spellcheck-api/ (you should try living it there if this API is still working ..)}
  Meaning? After that, after a couple of days, he unexpectedly clicked: a user spell check with a browser - using the browser context menu, and not block and provide your own. Thus, you can link this to an existing external spell checker library.

  The historical and experimental APIs clearly never supported what you want to achieve.

• Q: if the "Google Chrome" / "Chromium" spellcheck-API provides an onSpellError event (for example) (for example) a text field
  A: As stated above, it looks like there is no such event in Chrome.
  HTM5 currently provides the ability to enable or disable spell checking on supported spell check items.
• Q: how to access chrome spelling suggestions for misspelled words
  
  A: As stated above: it seems you cannot. This seems to be the same answer as for the nearly duplicated question: How can I access the Chrome spellcheck dictionary?
  It is interesting to note that “ TinyMCE spellchecker verification was previously provided by“ hacking ”Google’s Google toolbar API in accordance with Google’s legal usage policy. Service was terminated on an ongoing basis. ". Now, if you are looking on the Internet, you can probably find how they did it, but this, of course, is not the best way to do this (and defend it here).
  Using javascript proofing libraries, you can still use Chrome dictionaries (so you won’t need to support the dictionaries), but you will have to ship and send these files with your web application (instead of downloading the ones installed in the browser )

General:

4. Q: How to detect spelling error inside a text box in JavaScript
   A: Internet Explorer allows you to use spell checking integrated into Microsoft Word through ActiveX, as shown in the code snippet below.

    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; } 

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

   But IE / ActiveX / MS-Word is actually not what you asked for, and it is not a very advanced platform / browser , which leaves us with local javascript proofing libraries :
   Javascript Proofing Methods
   http://code.google.com/p/bjspell/
   http://www.javascriptspellcheck.com/
   http://ejohn.org/blog/revised-javascript-dictionary-search/
   Etc.
   Comparing / explaining them is really beyond the scope of this answer.
   It is worth noting which dictionary format you want to use!

   Alternatively, you can use the external spell-checking API service (where the server processes the data and you exchange it using AJAX).
   Obviously, you need to consider privacy issues!

Reward Requests:

5. Q: final evidence
   A: I had to find something more about the subject than some esoteric experimental functions. Also, I do not see libraries that are trying to reinforce their functionality with some (upcoming) standardized method / event identifiers, etc.
   As already noted, popular libraries like TinyMCE also currently have no other solution. In the “living standard” / “world is our playground” mentality, my answer can be very tired when I click the “send” button. But even then I would not recommend such an experimental feature in the near future on a production level website / interface.
6. Q: and get a good answer explaining how to achieve this
   (chrome specific or general? Spell check or typo detection?)
   A: In addition to the foregoing, I can not think of anything (except for the libraries that web developers currently use (see 4)).

Hope this helps!

Answer 3

There are no APIs to access Chrome spellcheck suggestions, and there are no events that would fire when words were saddened. However, events can be realized.

I have no idea what your use case for this function is, but I put together a demo using the montanaflynn spellchecker API in MashApe . The demo scans the text area, and when the user pauses when entering text, he sends the text through the API being checked. The API returns a JSON containing the source string, the proposed corrected string, and an object containing the corrected words and the suggested replacements.

Offers are displayed below the text box. When sentences freeze, a hazy word is highlighted. When a button is pressed, a typo is replaced by a sentence.

I also added a shuffle function that scrambles the words in the string before sending it to add a privacy layer to the use of the API (it also uses SSL). Neither the API nor Chrome use contextual suggestions, so shuffling does not change the results.

Here's a link to CodePen: http://codepen.io/aecend/pen/rOebQq

And here is the 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> 

I used jQuery to simplify the AJAX request for this demo. This can easily be done in JS Vanilla.

Answer 4

You can disable the spellcheck of the internal browser and integrate any other open source spellchecker library, such as JavaScript SpellCheck . It contains all the events that may be required for deep integration, check the API page .